Webpage, image over an image.

Discussion in 'OT Technology' started by zanyspy_dude, Mar 22, 2005.

  1. zanyspy_dude

    zanyspy_dude King of teh n00bz

    Joined:
    Aug 29, 2002
    Messages:
    4,473
    Likes Received:
    0
    Location:
    Indianapolis, IN
    Here is the deal. I've made a terrible(for 56k) webpage that is totally made in photoshop. Problem is this, i want to have a background image(series of carefully placed slices really) and have thumbnails for an image gallery floating above. I hear that .dhtml might work, problem i can't find any code of how to do this. Any ideas?


    Webpage for you to take a shit on... www.zanyspydude.com
     
  2. zanyspy_dude

    zanyspy_dude King of teh n00bz

    Joined:
    Aug 29, 2002
    Messages:
    4,473
    Likes Received:
    0
    Location:
    Indianapolis, IN
    ttt please help >:)
     
  3. zanyspy_dude

    zanyspy_dude King of teh n00bz

    Joined:
    Aug 29, 2002
    Messages:
    4,473
    Likes Received:
    0
    Location:
    Indianapolis, IN
    wow, no one knoows?
     
  4. zanyspy_dude

    zanyspy_dude King of teh n00bz

    Joined:
    Aug 29, 2002
    Messages:
    4,473
    Likes Received:
    0
    Location:
    Indianapolis, IN
    surely someone knows?!~
     
  5. Javi

    Javi New Member

    Joined:
    Sep 13, 2004
    Messages:
    37,785
    Likes Received:
    0
    Location:
    Houston, TX
    You can use tables. Use bottom img as a table BG.
    Or like you said, use DHTML with CSS. Use absolute positioning, and the z-index.
     
  6. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,914
    Likes Received:
    8
    Location:
    Los Angeles
    Do me a favor and quit promoting that shitty website.
     
  7. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,914
    Likes Received:
    8
    Location:
    Los Angeles
    I think I know what you want to do. You want to mouseover an image and a thumbnail will appear in a different location?

    If so, here is a script I used a few years back. Just edit it to fix the images.

    Code:
    <!--
    function stopError() {
            return true;
    }
    
    window.onerror = stopError;
    
    if (document.images){
            var m_on = new Image();
            	m_on.src="../layout/m2.jpg";
            var f_on = new Image();
            	f_on.src="../layout/f2.jpg";
    	var x_on = new Image();     
            	x_on.src="../layout/x2.jpg";
            var z_on = new Image();     
           		z_on.src="../layout/z2.jpg";
            var k_on = new Image();     
            	k_on.src="../layout/k2.jpg";
            var s_on = new Image();     
            	s_on.src="../layout/s2.jpg";
            var a_on = new Image();     
            	a_on.src="../layout/a2.jpg";	
    			var m_flip = new Image ();
    				m_flip.src="../layout/messageboard.jpg";
    			var f_flip = new Image ();
    				f_flip.src="../layout/information.jpg";
    			var x_flip = new Image ();
    				x_flip.src="../layout/housing.jpg";
    			var z_flip = new Image ();
    				z_flip.src="../layout/tutorials.jpg";
    			var k_flip = new Image ();
    				k_flip.src="../layout/news.jpg";
    			var s_flip = new Image ();
    				s_flip.src="../layout/rules.jpg";
    			var a_flip = new Image ();
    				a_flip.src="../layout/join.jpg";		
    }
    function m_light()
    {
    document.m_icon.src="../layout/m2.jpg";
    document.main_title.src="../layout/messageboard.jpg";
    }
    
    function f_light()
    {
    document.f_icon.src="../layout/f2.jpg";
    document.main_title.src="../layout/information.jpg";
    }
    
    function x_light()
    {
    document.x_icon.src="../layout/x2.jpg";
    document.main_title.src="../layout/housing.jpg";
    }
    
    function z_light()
    {
    document.z_icon.src="../layout/z2.jpg";
    document.main_title.src="../layout/tutorials.jpg";
    }
    
    function k_light()
    {
    document.k_icon.src="../layout/k2.jpg";
    document.main_title.src="../layout/news.jpg";
    }
    
    function s_light()
    {
    document.s_icon.src="../layout/s2.jpg";
    document.main_title.src="../layout/rules.jpg";
    }
    
    function a_light()
    {
    document.a_icon.src="../layout/a2.jpg";
    document.main_title.src="../layout/join.jpg";
    }
    
    function off()
    {
    document.m_icon.src="../layout/m.jpg";
    document.f_icon.src="../layout/f.jpg";
    document.x_icon.src="../layout/x.jpg";
    document.z_icon.src="../layout/z.jpg";
    document.k_icon.src="../layout/k.jpg";
    document.s_icon.src="../layout/s.jpg";
    document.a_icon.src="../layout/a.jpg";
    document.main_title.src="../layout/imperiumboreas.jpg";
    window.status="Welcome to Imperium Boreas! ";
    }
    
    //-->
    
    Then execute them like this.

    Code:
    <a href="" onmouseover="x_light()" onmouseout="off()"><img name="x_icon" src="../layout/x.jpg" border="0"></a>
    
    <a href="" onmouseover="z_light()" onmouseout="off()"><img name="z_icon" src="../layout/z.jpg" border="0"></a>
    
    Enjoy.
     

Share This Page