Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    I want to have my images rollover, but is there anyway to do this using a DIV?

    What I want is for the image to be positioned absolutely, and for the image to change colour on rollover. Can this be done using CSS & Javascript at all? If so does anyone have any example coding?
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    the :hover state in css only works for IE is it's not use in a link.

    so... you'll have to use js

    here's the js to put in the <head>...</head>
    Code:
    <script type="text/javascript">
    	<!--
    	function MM_jumpMenu(targ,selObj,restore){ //v3.0
    	  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
    		if (restore) selObj.selectedIndex=0;
    	}
    	//-->
    	</script>
    	
    	<script type="text/javascript">
    	<!--
    	function MM_preloadImages() { //v3.0
    		var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    			var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    			if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    	}
    	
    	function MM_swapImgRestore() { //v3.0
    		var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    	}
    	
    	function MM_findObj(n, d) { //v3.0
    		var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    			d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    		if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    		for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
    	}
    	
    	function MM_swapImage() { //v3.0
    		var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    		if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    	}
    	//-->
    	</script>
    i use this with link but i'm sure it works if you put it in the div's

    Code:
    <div onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','/images/menu-en/1-on.gif',1)">
    <img src="/images/menu-en/1-off.gif" name="home" border="0" alt="home" />
    </div>
    hope this is what you wanted
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  4. #3
    Senior Member Delerium's Avatar
    Join Date
    Jan 2003
    Location
    Toronto, Ontario, Canada
    Posts
    193
    Member #
    462
    If I'm reading what you want correctly, I think this may be what you are looking for:

    CSS code:
    PHP Code:
    #logo {
        
    positionabsolute;
        
    top50px;
        
    left50px;
        
    height30px;
        
    width157px;
        
    backgroundurl(logo-hover.gifno-repeat 0px 0px;
        
    margin0px;
        
    padding0px;
    }
    #logo a {
        
    displayblock;
        
    height30px;
        
    width157px;
    }
    #logo a:hover {
        
    backgroundurl(logo-hover.gifno-repeat 0px -35px;

    HTML code:
    PHP Code:
    <div id="logo"><a href="http://www.somelink.com"></a></div
    Hope this helps you out! This example is fairly simple - if you want it more complex, head over to A List Apart, as that is where I got this from - "CSS Sprites: Image Slicing’s Kiss of Death" is the article.

    BTW, this has been tested and works in IE5, 5.5 & 6, NS 6 & 7, Firefox 0.8, & Opera 7. It does not work in Opera 6.

  5. #4
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    Thanks to both of you.. Just what I was looking for
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:01 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com