40 users online (0 members and 40 guests)  


  Results 1 to 6 of 6

Related

  1. Problem with image rollover and text change    Forum: Javascript Forum
    Replies: 7
  2. how do I change text color?    Forum: CSS Forum
    Replies: 1
  3. how to change text dynamically with image?    Forum: Website Scripts Forum
    Replies: 0
  4. Replies: 0
  1. #1
    mayonaize's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2008
    Posts
    10

    Question How to rollver image to change block of text?

    Is this possible? I think some little piece of JS does it but it's one of things that's almost impossible to google for unfortunately so thought I'd ask here (because you all seem like helpful sorts!).

    Basically I'm building a site to have three images displayed horizontally (themselves changing when moused over to differing versions if possible) but with a div of text beneath all three which should only display the block of text relevant to the image rolled over.

    e.g.

    CAR BIKE ROCKET
    -------------------------------
    Some descriptive text about
    cars would be here when CAR
    is moused over.

    And that descriptive text changing when BIKE is moused over to something about bikes etc. etc.

    Can someone help me out? Or point me to something relevant at all?

    Thanks in advance.

  2. #2
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: How to rollver image to change block of text?

    You might find this basic example useful:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type="text/css">
    img{width:250px;height:200px;}
    ul{list-style-type:none;}
    li{float:left;margin:0px 10px;}
    #wrap{width:850px;margin:10px auto;}
    #message{width:850px;margin:auto;font-family:Verdana,tahoma;font-size:15pt;text-align:center;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
    for(var i=0,img=document.getElementById('rangA').getElementsByTagName('img');i<img.length;i++){
    	img[i].onmouseover=function(){
    		document.getElementById('message').innerHTML=this.getAttribute('rel');
    		}
    	}
    }
    </script>
    </head>
    <body>
    <div id="wrap">
    	<ul id="rangA">
    	<li><img src="http://h1.ripway.com/rangana/images/Picture3.jpg" alt="myimage" rel="Don't let my heart feel alone"></li>
    	<li><img src="http://h1.ripway.com/rangana/images/Picture4.jpg" alt="myimage" rel="How about giving me a time to show my smile?"></li>
    	<li><img src="http://h1.ripway.com/rangana/images/Picture5.jpg" alt="myimage" rel="My friend, you'll always find me on your side"></li>
    	</ul>
    	<div id="message">Default Message</div>
    </div>
    </body>
    </html>
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  3. #3
    mayonaize's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2008
    Posts
    10

    Re: How to rollver image to change block of text?

    Thanks so much! That works and is great!

    Just one more ponder if I may.. would this code still work if I were to have the images as rollovers (meaning image 1a changes to 1b on mouse over as well as the black of text changing below as currently) ?

    I tried but guess as the rel= is attached to the 1a and not the 1b whilst the image successfully swaps this breaks the text change.

  4. #4
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: How to rollver image to change block of text?

    Yes that's possible. Apologies, but the script I've given above haven't had that functionality. Here's a modified version:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <style type="text/css">
    img{width:250px;height:200px;}
    ul{list-style-type:none;}
    li{float:left;margin:0px 10px;}
    #wrap{width:850px;margin:10px auto;}
    #message{width:850px;margin:auto;font-family:Verdana,tahoma;font-size:15pt;text-align:center;}
    </style>
    <script type="text/javascript">
    /*
    //////////////////////////////////////////////
    First Seen @ ahfb2000.com/forum
    Script written by Raymond Angana
    username: rangana
    This notice must remain intact
    /////////////////////////////////////////////
    */
    window.onload=function(){
    for(var i=0,img=document.getElementById('rangA').getElementsByTagName('img');i<img.length;i++){
    	img[i].onmouseover=function(){
    		var filt=this.getAttribute('rel').split('@#');
    		document.getElementById('message').innerHTML=filt[0];
    		this.src=filt[1];
    		}
    	img[i].onmouseout=function(){
    		this.src=this.getAttribute('rel').split('@#')[2];
    		}
    	}
    }
    </script>
    </head>
    <body>
    <div id="wrap">
    	<ul id="rangA">
    	<li><img src="http://h1.ripway.com/rangana/images/Picture3.jpg" alt="myimage" rel="Don't let my heart feel alone@#http://h1.ripway.com/rangana/images/Picture7.jpg@#http://h1.ripway.com/rangana/images/Picture3.jpg"></li>
    	
    	<li><img src="http://h1.ripway.com/rangana/images/Picture4.jpg" alt="myimage" rel="How about giving me a time to show my smile?@#http://h1.ripway.com/rangana/images/Picture2.jpg@#http://h1.ripway.com/rangana/images/Picture4.jpg"></li>
    	
    	<li><img src="http://h1.ripway.com/rangana/images/Picture5.jpg" alt="myimage" rel="My friend, you'll always find me on your side@#http://h1.ripway.com/rangana/images/Picture1.png@#http://h1.ripway.com/rangana/images/Picture5.jpg"></li>
    	</ul>
    	<div id="message">Default Message</div>
    </div>
    </body>
    </html>
    The rel attribute could now take 3 parameters:
    1. Caption of the image you want to show
    2. The second image you want to use in replacement of the original image
    3. The default image


    These three parameters should be divided by "@#" delimiter.

    Hope that keeps you going. Get back if ever you're still stumped.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  5. #5
    mayonaize's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2008
    Posts
    10

    Re: How to rollver image to change block of text?

    Great stuff. Works perfectly. Thanks so much.

    I think I may come back to this forum more often!

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: How to rollver image to change block of text?

    Hi there Paul,

    you have been a little bit naughty with your use of the rel attribute.
    An element must include an href attribute for the rel attribute to be applied.
    This means that while your script works just fine your page unfortunately will fail validation.

    To get the page to validate you could use the longdesc attribute instead.
    Last edited by coothead; 08-06-2008 at 06:02 AM. Reason: forgot to post the alternative attribute



Tags for this Thread