si***********@y ahoo.com a écrit :
Hi,
I am just a javascript beginner so maybe this is a simple problem but I
am trying to do some rollovers on images in a separate <div>. Here is
the relevent piece of my code:
To roll-over images is very easy, you just need they are named
<script type="text/javascript">
function change() {
old2 = document.i_2.sr c;
old1 = document.i_1.sr c;
document.i_1.sr c = document.i_1.sr c==old1? old2 : old1;
document.i_2.sr c = document.i_2.sr c==old2? old1 : old2;
}
</script>
<div>
<img src="asm1.gif" name="i_1" onclick="change ();">
</div>
<div>
<img src="asm2.gif" name="i_2" onclick="change ();">
</div>
<form>
<input type=button value=change onclick="change ();">
</form>
or :
<script type="text/javascript">
function exchange(img1,i mg2) {
img1 = eval('document. '+img1)
img2 = eval('document. '+img2)
old2 = img2.src;
old1 = img1.src;
img1.src = img1.src==old1? old2 : old1;
img2.src = img2.src==old2? old1 : old2;
}
</script>
<div>
<img src="asm1.gif" name="i_1" onclick="exchan ge('i_1', 'i_2');">
</div>
<div>
<img src="asm2.gif" name="i_2" onclick="exchan ge('i_1', 'i_2');">
</div>
<form>
<input type=button value=exchange onclick="exchan ge('i_1', 'i_2');">
</form>
Tested : FireFox, Safari, Opera 9, IE 5.2 Mac, NC4.5
(NC.4 needs a button, onclick on images gives nothing)
The complete very old method for rollOvers in JS :
<script type="text/javascript">
if(document.ima ges) {
img1 = new Image(); img1.src = 'asm1.gif';
img2 = new Image(); img2.src = 'asm2.gif';
}
function roll(name, imag) {
if(document.ima ges {
eval('document. images["'+name+'"].src = '+imag+'.src');
}
}
</script>
<divExample 1 (one image rolled) :
<img src="asm1.gif" name="i_1"
onmouseover="ro ll('i_1','img2' )"
onmouseout=" roll('i_1','img 1')">
</div>
<divExample 1 (two images rolled) :
<img src="asm2.gif" name="i_2"
onmouseover="ro ll('i_1','img2' );roll('i_2','i mg1')"
onmouseout=" roll('i_1','img 1');roll('i_2', 'img2')">
</div>
<html>
<head>
<script type="text/javascript">
if (document.image s) {
a_1 = new Image;
a_1.src = "DesignedImages \header.jpg";
b_1 = new Image;
b_1.src = "DesignedImages \line6.jpg";
}
function showImg(imgname , rollname)
{
var obja = parent.document .getElementById ("roll_a");
var objb = parent.document .getElementById ("roll_b");
if (document.image s) {
window.onerror = null;
document.getEle mentById(rollna me).src=eval(im gname +
".src");
}
}
function showImg(imgname , rollname){
if (document.image s) {
document.getEle mentById(rollna me).src = eval(imgname+'. src');
}
}
</script>
</head>
<body>
<div id="topOrganize r">
<div id="top" align="center">
<img src="DesignedIm ages\header.jpg " id="roll_a">
</div>
<div id="line1">
<img src="DesignedIm ages\line5.jpg" id="roll_b">
</div>
</div>
<div id="header">
<div id="links">
<ul id="rolllist">
<li><a href="Peterson. html"
onmouseover="sh owImg('a_1','ob ja');showImg('b _1','objb')"><b >REPRESENTATI VE
PROJECTS</b></a> < img src="DesignedIm ages/button.jpg"></li>
<a href="Peterson. html"
onmouseover="sh owImg('a_1','ro ll_a'); showImg('b_1',' roll_b')"
><b>REPRESENTAT IVE PROJECTS</b>
</a>
</ul>
</div>
</body>
Due to the rather complicated nature of the design I really want to
keep using divs rather than a table but I really need to get the
rollover to work as well. I just keep getting an error that it can't
find the image object.
of course : you don't give name of the object !
