Rollover that changes BOTH a picture AND a text

**Jay Dog** · 01-26-2013, 04:50 PM

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.

**vwphillips** · 01-26-2013, 07:03 PM

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>

**Jay Dog** · 01-26-2013, 07:48 PM

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. :-)

**Jay Dog** · 01-26-2013, 07:50 PM

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.

**Jay Dog** · 01-29-2013, 09:56 AM

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.

**vwphillips** · 01-30-2013, 12:22 PM

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>