Results 1 to 4 of 4

Thread: changing image and text on mouse using JS

  1. #1
    Join Date
    Dec 2005
    Posts
    133
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Default changing image and text on mouse using JS

    Hi
    I am looking for a script that will do the follwong.
    when mouseover on a text and its icon, their color change to green (icon and text)

    see attachment

  2. #2
    Join Date
    Dec 2005
    Posts
    133
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Default

    I really need help with this!!

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var rollovercolor = 'green';
    	$('.rollover').hover(function(){
    		var r = $(this), im = r.find('img');
    		r.css({color: rollovercolor});
    		im.data('original', im.get(0).src).attr('src', im.attr('data-rollover'));
    	}, function(){
    		var r = $(this), im = r.find('img');
    		r.css({color: ''});
    		im.attr('src', im.data('original'));
    	}).each(function(){
    		var im = new Image();
    		im.src = $(this).find('img').attr('data-rollover');
    	});
    });
    </script>
    </head>
    <body>
    <span class="rollover"><img src="ip.gif" data-rollover="ipg.gif" alt="iPhone / iPad image" title=""><br>iPhone / iPad</span>
    </body>
    </html>
    Last edited by jscheuer1; 10-14-2010 at 02:37 PM. Reason: correct .each function's code (preloader)
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    emanuelle (10-14-2010)

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    I realized I made an error (now corrected in the original):

    this:

    Code:
    	}).each(function(){
    		var im = new Image();
    		im.src = $(this).attr('data-rollover');
    	});
    should be:

    Code:
    	}).each(function(){
    		var im = new Image();
    		im.src = $(this).find('img').attr('data-rollover');
    	});
    Also, though more complex, using a float: left div with a background image and a container div for that, gives more flexibility and the ability to link the item:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var rollovercolor = 'green', // set rollover color for text;
    	r, im;
    	$('.rollover').hover(function(){
    		r = $(this); im = r.find('img');
    		r.css({color: rollovercolor});
    		im.attr('src', im.attr('data-rollover'));
    	}, function(){
    		r = $(this); im = r.find('img');
    		r.css({color: ''});
    		im.attr('src', im.data('original'));
    	}).each(function(){
    		var imn = new Image(), im = $(this).find('img');
    		imn.src = im.attr('data-rollover');
    		im.data('original', im.get(0).src)
    	});
    });
    </script>
    <style type="text/css">
    .rollover {
    	text-align: center;
    	font: normal 80% sans-serif;
    	float: left;
    	color: black;
    	background: #f8f8f8 url(bg.gif) 5px 0 no-repeat;
    }
    .rollover img {
    	border-width: 0;
    }
    .rollover a {
    	text-decoration: none;
    	color: black;
    	display: block;
    	padding: 0 3px 0.5em;
    }
    .rollover a:hover {
    	text-decoration: none;
    	color: green;
    }
    .rollovercontiner {
    	overflow: hidden;
    }
    </style>
    </head>
    <body>
    some content
    <div class="rollovercontiner">
    <div class="rollover"><a href="http://www.google.com/"><img src="ipt.gif" data-rollover="iptg.gif" alt="iPhone / iPad image" title=""><br>iPhone / iPad</a></div>
    </div><!--[if lt IE 7]><br style="clear: left;"><![endif]-->
    more content
    </body>
    </html>
    Demo:

    http://home.comcast.net/~jscheuer1/side/rollover/
    Last edited by jscheuer1; 10-14-2010 at 02:48 PM. Reason: update code and demo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    emanuelle (10-14-2010)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •