...

View Full Version : Multiple Rollover Images issue



ianxharris
02-17-2009, 01:12 AM
I have been researching this all over the web for the past couple hours and have it close to working but do not know how to get them working correctly.

Please reviews the site here:
http://www.saltartspace.org

I am attempting to get the 6 rollovers to work correctly but am missing some essential code that enables the html to call the correct mouseout/over source images. I'm probably using incorrect terminology since I am self taught.

Please review the code I have for the page:

<script type="text/javascript">

if( document.images ) {
var overVariableImg = new Image(); overVariableImg.src = "graphics/home/1box-roll.gif";
var outVariableImg = new Image(); outA.src = "graphics/home/1box.gif";
}

if( document.images ) {
var overVariableImg = new Image(); overVariableImg.src = "graphics/home/2box-roll.gif";
var outVariableImg = new Image(); outVariableImg.src = "graphics/home/2box.gif";
}

if( document.images ) {
var overVariableImg = new Image(); overVariableImg.src = "graphics/home/3box-roll.gif";
var outVariableImg = new Image(); outVariableImg.src = "graphics/home/3box.gif";
}

if( document.images ) {
var overVariableImg = new Image(); overVariableImg.src = "graphics/home/4box-roll.gif";
var outVariableImg = new Image(); outVariableImg.src = "graphics/home/4box.gif";
}

if( document.images ) {
var overVariableImg = new Image(); overVariableImg.src = "graphics/home/5box-roll.gif";
var outVariableImg = new Image(); outVariableImg.src = "graphics/home/5box.gif";
}

if( document.images ) {
var overVariableImg = new Image(); overVariableImg.src = "graphics/home/6box-roll.gif";
var outVariableImg = new Image(); outVariableImg.src = "graphics/home/6box.gif";
}

</script>

<body>

<div class="homesquare1">
<a href="about.com"
onmouseover="if( document.images ) { document.images['1'].src = overVariableImg.src; }"
onmouseout="if( document.images ) { document.images['1'].src = outVariableImg.src; }">
<img src="graphics/home/1box.gif" name="1" height="150" width="150" alt="" border="0"></a>
</div>

<div class="homesquare2">
<a href="gallery.com"
onmouseover="if( document.images ) { document.images['2'].src = overVariableImg.src; }"
onmouseout="if( document.images ) { document.images['2'].src = outVariableImg.src; }">
<img src="graphics/home/2box.gif" name="2" height="150" width="150" alt="" border="0"></a>

</div>

<div class="homesquare3">
<a href="projects.com"
onmouseover="if( document.images ) { document.images['3'].src = overVariableImg.src; }"
onmouseout="if( document.images ) { document.images['3'].src = outVariableImg.src; }">
<img src="graphics/home/3box.gif" name="3" height="150" width="150" alt="" border="0"></a>
</div>

<div class="homesquare4">
<a href="/use.com"
onmouseover="if( document.images ) { document.images['4'].src = overVariableImg.src; }"
onmouseout="if( document.images ) { document.images['4'].src = outVariableImg.src; }">
<img src="graphics/home/4box.gif" name="4" height="150" width="150" alt="" border="0"></a>
</div>

<div class="homesquare5">
<a href="/contact.com"
onmouseover="if( document.images ) { document.images['5'].src = overVariableImg.src; }"
onmouseout="if( document.images ) { document.images['5'].src = outVariableImg.src; }">
<img src="graphics/home/5box.gif" name="5" height="150" width="150" alt="" border="0"></a>
</div>

<div class="homesquare6">
<a href="/blog.com"
onmouseover="if( document.images ) { document.images['6'].src = overVariableImg.src; }"
onmouseout="if( document.images ) { document.images['6'].src = outVariableImg.src; }">
<img src="graphics/home/6box.gif" name="6" height="150" width="150" alt="" border="0"></a>
</div>

</body>

jmrker
02-22-2009, 04:29 PM
Try this major revision: :)


<html>
<head>
<title>Multiple Rollover Images</title>
<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=158929

var overVariableImg = [
"graphics/home/1box-roll.gif",
"graphics/home/2box-roll.gif",
"graphics/home/3box-roll.gif",
"graphics/home/4box-roll.gif",
"graphics/home/5box-roll.gif",
"graphics/home/6box-roll.gif"
];
var outVariableImg = [
"graphics/home/1box.gif",
"graphics/home/2box.gif",
"graphics/home/3box.gif",
"graphics/home/4box.gif",
"graphics/home/5box.gif",
"graphics/home/6box.gif"
];
function RollOver(IDS) {
var tmp = IDS.split('');
p = tmp[1]-1;
if( document.images ) {
document.images[IDS].src = overVariableImg[p];
document.images[IDS].alt = overVariableImg[p];
}
}
function RollOut(IDS) {
var tmp = IDS.split('');
p = tmp[1]-1;
if( document.images ) {
document.images[IDS].src = outVariableImg[p];
document.images[IDS].alt = outVariableImg[p];
}
}
</script>
<body>

<div class="homesquare1">
<a href="about.com" onmouseover="RollOver('p1')" onmouseout="RollOut('p1')">
<img src="graphics/home/1box.gif" name="p1" height="150" width="200" alt="p1" border="0">
</a>
</div>

<div class="homesquare2">
<a href="gallery.com" onmouseover="RollOver('p2')" onmouseout="RollOut('p2')">
<img src="graphics/home/2box.gif" name="p2" height="150" width="200" alt="p2" border="0">
</a>

</div>

<div class="homesquare3">
<a href="projects.com" onmouseover="RollOver('p3')" onmouseout="RollOut('p3')">
<img src="graphics/home/3box.gif" name="p3" height="150" width="200" alt="p3" border="0">
</a>
</div>

<div class="homesquare4">
<a href="/use.com" onmouseover="RollOver('p4')" onmouseout="RollOut('p4')">
<img src="graphics/home/4box.gif" name="p4" height="150" width="200" alt="p4" border="0">
</a>
</div>

<div class="homesquare5">
<a href="/contact.com" onmouseover="RollOver('p5')" onmouseout="RollOut('p5')">
<img src="graphics/home/5box.gif" name="p5" height="150" width="200" alt="p5" border="0">
</a>
</div>

<div class="homesquare6">
<a href="/blog.com" onmouseover="RollOver('p6')" onmouseout="RollOut('p6')">
<img src="graphics/home/6box.gif" name="p6" height="150" width="200" alt="p6" border="0">
</a>
</div>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum