Results 1 to 6 of 6

Thread: Rollover that changes BOTH a picture AND a text

  1. #1
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default Rollover that changes BOTH a picture AND a text

    Hi, I'm away from my work PC so I don't have any code samples to show but just a quick question; is it at all possible to have a rollover that changes not only a picture somewhere else on a page (I know this as I have done it before) but also some text as well?

    For example you have an image (image a) and next to it another image(image b), underneath image b you have text(text b), when you rollover image a, both image b and text b become image c and text c.

    I'll have a play on it at work on Monday but it's related to my map of school project I have been working on.

    Incidentally I'll post the code of that on Monday, it does work and I'm quite happy with it but if anyone wishes to have a look and see if there could be any suggested improvements that's be really great.

    Thanks and have a good weekend.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    .parent {
      width:200px;
    }
    
    .parent DIV{
      text-Align:center;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function RollOver(id,src,txt){
     var img=document.getElementById(id),title=img.parentNode.getElementsByTagName('DIV')[0],obj=RollOver[id];
     if (!obj){
      obj=RollOver[id]={
       src:img.src,
       title:title,
       txt:title?title.innerHTML:false
      }
     }
     img.src=src?src:obj.src;
     if (obj.title){
      title.innerHTML=txt?txt:obj.txt;
     }
    }
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    <div class="parent" >
    <img id="img0" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img"  onmouseover="RollOver('img0','http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','Img 7');" onmouseout="RollOver('img0');"  />
    <div >Egypt 5</div>
    </div>
    <div class="parent" >
    <img id="img1"  src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" onmouseover="RollOver('img1','http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','Img 8');" onmouseout="RollOver('img1');"  />
    <div >Egypt 6</div>
    </div>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    Jay Dog (01-26-2013)

  4. #3
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    WOW!!! Again I am so impressed, many many thanks, I had no idea I'd get a response so soon.

    The code is for virtual map of the school, I roll over a specific area and then a random image of that area comes up but I wanted the name of the area to come up as well, such as Alder, Birch, Chestnut. I'll have a play with this on Monday but wow, thanks again for your help. :-)

  5. #4
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    Hi, the charity you support, I will forward the url to a friend of mine that teaches RE. We work with Operation Christmas Child where we fill shoeboxes of toys and things for children.

  6. #5
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    Hi.

    The code you put on worked an absolute treat but so far I have failed to 'marry' it up to this code I have been working on:

    HTML Code:
    <html><head>
    
    <script language="JAVASCRIPT">
    <!--
    
    function alderImage() {
    pic = new Array();
    pic[0] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/yellow who.png';
    pic[1] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/yellow what.png';
    pic[2] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/yellow where.png';
    pic[3] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/yellow why.png';
    pic[4] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/yellow when.png';
    
    randomNum = Math.floor(Math.random()*pic.length);
    newImage = pic[randomNum]; 
    
    
    return newImage;
    }
    
    // -->
    
    <!--
    
    function birchImage() {
    pic = new Array();
    pic[0] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/green who.png';
    pic[1] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/green what.png';
    pic[2] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/green where.png';
    pic[3] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/green why.png';
    pic[4] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/green when.png';
    
    randomNum = Math.floor(Math.random()*pic.length);
    newImage = pic[randomNum]; 
    
    
    return newImage;
    }
    
    // -->
    
    
    <!--
    
    function chestnutImage() {
    pic = new Array();
    pic[0] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/blue who.png';
    pic[1] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/blue what.png';
    pic[2] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/blue where.png';
    pic[3] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/blue why.png';
    pic[4] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/blue when.png';
    
    randomNum = Math.floor(Math.random()*pic.length);
    newImage = pic[randomNum]; 
    
    
    return newImage;
    }
    
    
    // -->
    
    
    
    <!--
    
    function centreImage() {
    pic = new Array();
    pic[0] = 'https://jupiter.inthehive.net/sites/bigwood/Pupils/Year%207%20Pupils/7%20generic/main.jpg';
    
    
    randomNum = Math.floor(Math.random()*pic.length);
    newImage = pic[randomNum]; 
    
    
    return newImage;
    }
    
    // -->
    
    
    <!--
    
    function frontImage() {
    pic = new Array();
    pic[0] = 'https://jupiter.inthehive.net/sites/bigwood/Pupils/Year%207%20Pupils/7%20generic/oak.jpg';
    
    
    randomNum = Math.floor(Math.random()*pic.length);
    newImage = pic[randomNum]; 
    
    
    return newImage;
    }
    
    // -->
    
    
    
    
    
    
    
    
    <!--
    
    function douglasImage() {
    pic = new Array();
    pic[0] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/red who.png';
    pic[1] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/red what.png';
    pic[2] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/red where.png';
    pic[3] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/red why.png';
    pic[4] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/red when.png';
    
    randomNum = Math.floor(Math.random()*pic.length);
    newImage = pic[randomNum]; 
    
    
    return newImage;
    }
    
    // -->
    
    <!--
    
    function elmImage() {
    pic = new Array();
    pic[0] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/orange who.png';
    pic[1] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/orange what.png';
    pic[2] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/orange where.png';
    pic[3] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/orange why.png';
    pic[4] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/orange when.png';
    
    randomNum = Math.floor(Math.random()*pic.length);
    newImage = pic[randomNum]; 
    
    
    return newImage;
    }
    
    // -->
    
    
    <!--
    
    function oakImage() {
    pic = new Array();
    pic[0] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/violet who.png';
    pic[1] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/violet what.png';
    pic[2] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/violet where.png';
    pic[3] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/violet why.png';
    pic[4] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/violet when.png';
    
    randomNum = Math.floor(Math.random()*pic.length);
    newImage = pic[randomNum]; 
    
    
    return newImage;
    }
    
    // -->
    
    <!--
    
    function mugaImage() {
    pic = new Array();
    pic[0] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/purple1.png';
    pic[1] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/purple2.png';
    pic[2] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/purple3.png';
    pic[3] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/purple4.png';
    pic[4] = 'https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site%20Images/purple5.png';
    
    randomNum = Math.floor(Math.random()*pic.length);
    newImage = pic[randomNum]; 
    
    
    return newImage;
    }
    
    // -->
    
    
    
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    </head><body>
    
    
    <table width="100%" border="0" cellpadding="0">
      <tbody><tr>
        <td width="50%" rowspan="2"><img src="schoolmap2.png" border="0" usemap="#Map"></td>
        <td width="50%" height="380" align="center" valign="middle">
        
        
        <img name="myImage2" src="https://jupiter.inthehive.net/sites/bigwood/Pupils/Year%207%20Pupils/7%20generic/oak.jpg">
        
        <p><br><br>
        </p></td>
      </tr>
        <tr>
          <td align="center" valign="middle"><font size="4">Click on any block to get to its building page</font></td>
        </tr>
      </tbody>
    </table>
    <br><br><br>
    
    <map name="Map">
    
    
    
      <area shape="rect" coords="55,152,108,232" href="/sites/bigwood/Pupils/Year%207%20Pupils/7%20pages/Alder.aspx" alt="Alder" 
     onMouseOver="document.images.myImage2.src = alderImage();" onMouseOut="document.images.myImage2.src = frontImage();" >
      
      
      
      <area shape="rect" coords="109,103,190,159" href="/sites/bigwood/Pupils/Year%207%20Pupils/7%20pages/Birch.aspx" alt="Birch" onMouseOver="document.images.myImage2.src = birchImage();" onMouseOut="document.images.myImage2.src = frontImage();" >
      
      
      
      <area shape="rect" coords="192,157,237,220" href="/sites/bigwood/Pupils/Year%207%20Pupils/7%20pages/Chestnut.aspx" alt="Chestnut" onMouseOver="document.images.myImage2.src = chestnutImage();" onMouseOut="document.images.myImage2.src = frontImage();" >
      
      
      
      
      <area shape="rect" coords="111,235,183,281" href="/sites/bigwood/Pupils/Year%207%20Pupils/7%20pages/Oak.aspx" alt="Oak" 
      onMouseOver="document.images.myImage2.src = oakImage();" onMouseOut="document.images.myImage2.src = frontImage();" >
      
      
      
      
      <area shape="poly" coords="321,294,391,266,455,390,389,419" href="/sites/bigwood/Pupils/Year%207%20Pupils/7%20pages/Douglas.aspx" alt="Birch" onMouseOver="document.images.myImage2.src = elmImage();" onMouseOut="document.images.myImage2.src = frontImage();" >
      
      
      
      
      <area shape="rect" coords="121,17,281,85" href="/sites/bigwood/Pupils/Year%207%20Pupils/7%20pages/muga.aspx" alt="Muga" onMouseOver="document.images.myImage2.src = mugaImage();" onMouseOut="document.images.myImage2.src = frontImage();" >
      
      
      
      
     
      
      
      
      <area shape="poly" coords="201,245,244,229,284,311,226,330,233,307" href="/sites/bigwood/Pupils/Year%207%20Pupils/7%20pages/Chestnut.aspx" alt="Douglas" onMouseOver="document.images.myImage2.src = douglasImage();"  onMouseOut="document.images.myImage2.src = frontImage();"  >
      
      
      
      
      <area shape="poly" coords="226,341,280,322,272,346,264,353,251,420,222,413" href="/sites/bigwood/Pupils/Year%207%20Pupils/7%20pages/Chestnut.aspx" alt="Elm" onMouseOver="document.images.myImage2.src = elmImage();" onMouseOut="document.images.myImage2.src = frontImage();" >
      
      
      
      
      <area shape="rect" coords="112,165,186,212" href="/sites/bigwood/Pupils/Year%207%20Pupils/7%20pages/Chestnut.aspx" alt="Elm" onMouseOver="document.images.myImage2.src = centreImage();" onMouseOut="document.images.myImage2.src = frontImage();" >
      
      
      
      <area shape="rect" coords="113,295,178,346" href="#" onMouseOver="document.images.myImage2.src = frontImage();">
    </map>
    
     </body></html>

    What I want this to do is have it so that when you roll over 'Alder' the text underneath it changes to Alder and a random image of Alder appears, the same with Birch, Chestnut etc. I have tried to work this out all morning but with little (well, no success).

    Like I said the sample you gave me was ideal but so far being able to mix the two codes together has unfortunately eluded me.
    Last edited by djr33; 01-29-2013 at 09:45 PM. Reason: add [HTML] tags

  7. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    Code:
    <html><head>
    
    <script language="JAVASCRIPT">
    <!--
    
    function alderImage() {
     var pic = [
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','Egypt 1'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','Egypt 2'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','Egypt 3'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','Egypt 4'],
     ['http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg','Egypt 5']
     ];
     var randomNum = Math.floor(Math.random()*pic.length);
     var newImage = pic[randomNum];
     return pic[randomNum];
    }
    
    // -->
    
    <!--
    
    function birchImage() {
     var pic = [
     ['http://www.vicsjavascripts.org.uk/StdImages/1.gif','One'],
     ['http://www.vicsjavascripts.org.uk/StdImages/2.gif','Two'],
     ['http://www.vicsjavascripts.org.uk/StdImages/3.gif','Three'],
     ['http://www.vicsjavascripts.org.uk/StdImages/4.gif','Four'],
     ['http://www.vicsjavascripts.org.uk/StdImages/5.gif','Five']
     ];
     var randomNum = Math.floor(Math.random()*pic.length);
     var newImage = pic[randomNum];
     return pic[randomNum];
    }
    
    function RollOver(id,src){
     var img=document.getElementById(id),title=img.parentNode.getElementsByTagName('DIV')[0],obj=RollOver[id];
     if (!obj){
      obj=RollOver[id]={
       src:img.src,
       title:title,
       txt:title?title.innerHTML:false
      }
     }
     img.src=src?src[0]:obj.src;
     if (obj.title){
      title.innerHTML=src&&src[1]?src[1]:obj.txt;
     }
    }
    
    
    
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    </head><body>
    <img src="https://jupiter.inthehive.net/sites/bigwood/Departments/sandpit/Site Images/violet who.png" />
    
    <table width="100%" border="0" cellpadding="0">
      <tbody><tr>
        <td width="50%" rowspan="2"><img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" border="0" usemap="#Map"></td>
        <td width="50%" height="380" align="center" valign="middle">
    
    
        <img id="myImage2" name="myImage2" src="http://www.vicsjavascripts.org.uk/StdImages/0.gif">
        <div></div>
        <p><br><br>
        </p></td>
      </tr>
        <tr>
          <td align="center" valign="middle"><font size="4">Click on any block to get to its building page</font></td>
        </tr>
      </tbody>
    </table>
    <br><br><br>
    
    <map name="Map">
    
    
    
      <area shape="rect" coords="0,0,175,263" href="/sites/bigwood/Pupils/Year 7 Pupils/7 pages/Alder.aspx" alt="Alder"
     onmouseover="RollOver('myImage2',alderImage());" onmouseout="RollOver('myImage2');" >
    
    
    
      <area shape="rect" coords="175,0,350,263" href="/sites/bigwood/Pupils/Year 7 Pupils/7 pages/Birch.aspx" alt="Birch"
      onmouseover="RollOver('myImage2',birchImage());" onmouseout="RollOver('myImage2');" >
    
    
    
    </map>
    
     </body></html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Expanding a picture on rollover
    By toby in forum JavaScript
    Replies: 3
    Last Post: 01-04-2008, 02:59 PM
  2. how to get a picture to expand on rollover?
    By blwow in forum JavaScript
    Replies: 6
    Last Post: 03-21-2007, 08:36 PM
  3. Rollover w/ picture over slide show?
    By NeoMir in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-31-2006, 06:13 PM
  4. Rollover w/ picture over slide show?
    By NeoMir in forum JavaScript
    Replies: 1
    Last Post: 01-08-2006, 04:22 AM
  5. Text Rollover and Link Rollover help
    By runicaldeva in forum JavaScript
    Replies: 5
    Last Post: 08-04-2005, 10:15 AM

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
  •