Rollover that changes BOTH a picture AND a text [Archive]

View Full Version : 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

<!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><head>

<script language="JAVASCRIPT">


















</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

<html><head>

<script language="JAVASCRIPT">


<!--

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>