By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,148 Members | 739 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,148 IT Pros & Developers. It's quick & easy.

Accessing Image in Another <Div>

P: n/a
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:

<html>
<head>
<script type="text/javascript">
if (document.images) {
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.images) {
window.onerror = null;
document.getElementById(rollname).src=eval(imgname +
".src");
}
}
</script>
</head>
<body>
<div id="topOrganizer">
<div id="top" align="center">
<img src="DesignedImages\header.jpg" id="roll_a">
</div>
<div id="line1">
<img src="DesignedImages\line5.jpg" id="roll_b">
</div>
</div>
<div id="header">
<div id="links">
<ul id="rolllist">
<li><a href="Peterson.html"
onmouseover="showImg('a_1','obja');showImg('b_1',' objb')"><b>REPRESENTATIVE
PROJECTS</b></a>&nbsp;&nbsp;<img src="DesignedImages/button.jpg"></li>
</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.

Can anyone help me?

Thanks!

Joy

Oct 30 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
ASM
si***********@yahoo.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.src;
old1 = document.i_1.src;
document.i_1.src = document.i_1.src==old1? old2 : old1;
document.i_2.src = document.i_2.src==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,img2) {
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="exchange('i_1', 'i_2');">
</div>
<div>
<img src="asm2.gif" name="i_2" onclick="exchange('i_1', 'i_2');">
</div>
<form>
<input type=button value=exchange onclick="exchange('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.images) {
img1 = new Image(); img1.src = 'asm1.gif';
img2 = new Image(); img2.src = 'asm2.gif';
}
function roll(name, imag) {
if(document.images {
eval('document.images["'+name+'"].src = '+imag+'.src');
}
}
</script>
<divExample 1 (one image rolled) :
<img src="asm1.gif" name="i_1"
onmouseover="roll('i_1','img2')"
onmouseout=" roll('i_1','img1')">
</div>
<divExample 1 (two images rolled) :
<img src="asm2.gif" name="i_2"
onmouseover="roll('i_1','img2');roll('i_2','img1') "
onmouseout=" roll('i_1','img1');roll('i_2','img2')">
</div>

<html>
<head>
<script type="text/javascript">
if (document.images) {
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.images) {
window.onerror = null;
document.getElementById(rollname).src=eval(imgname +
".src");
}
}
function showImg(imgname, rollname){
if (document.images) {
document.getElementById(rollname).src = eval(imgname+'.src');
}
}
</script>
</head>
<body>
<div id="topOrganizer">
<div id="top" align="center">
<img src="DesignedImages\header.jpg" id="roll_a">
</div>
<div id="line1">
<img src="DesignedImages\line5.jpg" id="roll_b">
</div>
</div>
<div id="header">
<div id="links">
<ul id="rolllist">
<li><a href="Peterson.html"
onmouseover="showImg('a_1','obja');showImg('b_1',' objb')"><b>REPRESENTATIVE
PROJECTS</b></a>&nbsp;&nbsp;<img src="DesignedImages/button.jpg"></li>
<a href="Peterson.html"
onmouseover="showImg('a_1','roll_a'); showImg('b_1','roll_b')"
><b>REPRESENTATIVE 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 !
Oct 30 '06 #2

P: n/a

ASM wrote:
si***********@yahoo.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
CSS rollovers are considerably simpler, very few new sites use scripted
rollovers:

<URL: http://alistapart.com/stories/rollovers/ >

Of course the OP may just be doing this for practice. :-)

[...]

--
Rob

Oct 30 '06 #3

P: n/a
ASM
RobG a écrit :
ASM wrote:
>si***********@yahoo.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

CSS rollovers are considerably simpler, very few new sites use scripted
rollovers:
Ho yes ! I forgot to tell him.

But to roll over another image than this mouseoverized ...
and much more better to keep it changed ...
perhaps with css5 ?

A very interresting site about all kind of overizations on images via css :
http://www.cssplay.co.uk/menu/index.html
and my prefered (I find very clever) :
- FireFox only
http://www.cssplay.co.uk/menu/superanimation.html
- Panoramic image scroller
http://www.cssplay.co.uk/menu/scroller.html

--
ASM
Oct 30 '06 #4

P: n/a
Thank you but all that doesn't actually answer my question. I know how
to rollover images when you hover over the image itself - but I want to
do a rollover of an image when you hover over a link that is in a
different <div>. I found code that shows how to do a rollover on an
image when you hover over a link but the code doesn't work if the image
and link are in two separate <div>s you see??

Is there any solution for this problem?

Thanks!

Oct 31 '06 #5

P: n/a
si***********@yahoo.com <si***********@yahoo.comwrote:
>
Is there any solution for this problem?
yes sure are links and images of the same number ?
--
Une Bévue
Oct 31 '06 #6

P: n/a

si***********@yahoo.com wrote:
Thank you but all that doesn't actually answer my question. I know how
to rollover images when you hover over the image itself - but I want to
do a rollover of an image when you hover over a link that is in a
different <div>.
The theory is exactly the same - use onmouseover to change the src
attribute of some image. Where it is in the document is irrelevant
(unless it's in an iFrame under some conditions).

I found code that shows how to do a rollover on an
image when you hover over a link but the code doesn't work if the image
and link are in two separate <div>s you see??
I can't see what you don't post.

Is there any solution for this problem?
Thousands.

Go to the Google news site: <URL:
http://news.google.com/news?ned=au&topic=t download some of their
thumbnails and save them as a.jpg, b.jpg, etc. then try the following:

<title>Image Rollover Play</title>
<script type="text/javascript">

function swapImg(el){
document.images['mainImg'].src = el.src;
}

</script>
<div style="float:left; border:1px solid blue;">
<img src="a.jpg" onmouseover="swapImg(this);"><br>
<img src="b.jpg" onmouseover="swapImg(this);"><br>
<img src="c.jpg" onmouseover="swapImg(this);"><br>
<img src="d.jpg" onmouseover="swapImg(this);"><br>
</div>
<div style="margin-left: 160px;">
<img src="a.jpg" name="mainImg">
</div>
--
Rob

Oct 31 '06 #7

P: n/a
ASM
si***********@yahoo.com a écrit :
Thank you but all that doesn't actually answer my question.
To who do you speak ?
I know how
to rollover images when you hover over the image itself -
Bravissimo.
but I want to
do a rollover of an image when you hover over a link that is in a
different <div>. I found code that shows how to do a rollover on an
image when you hover over a link but the code doesn't work if the image
and link are in two separate <div>s you see??
I did see ... and did give you several solutions
Is there any solution for this problem?
I did have corrected your script ...

But perhaps do you prefer to spend your time to ask without reading
answers ?

--
ASM
Oct 31 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.