Accessing Image in Another <Div>

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

simchajoy2000@yahoo.com - 30 Oct 2006 21:29 GMT

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

Reply to this Message

ASM - 30 Oct 2006 23:33 GMT

simchajoy2000@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>
<div> Example 1 (one image rolled) :
<img src="asm1.gif" name="i_1"
onmouseover="roll('i_1','img2')"
onmouseout=" roll('i_1','img1')">
</div>
<div> Example 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>
[quoted text clipped - 16 lines]
> }
> }

function showImg(imgname, rollname){
if (document.images) {
document.getElementById(rollname).src = eval(imgname+'.src');
}
}

> </script>
> </head>
[quoted text clipped - 13 lines]
> onmouseover="showImg('a_1','obja');showImg('b_1','objb')"><b>REPRESENTATIVE
> PROJECTS</b></a>  <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>
[quoted text clipped - 4 lines]
> 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 !

Reply to this Message

RobG - 30 Oct 2006 23:57 GMT

> simchajoy2000@yahoo.com a écrit :
> > Hi,
[quoted text clipped - 4 lines]
>
> 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. :-)

[...]

Signature

Rob

Reply to this Message

ASM - 31 Oct 2006 00:15 GMT

RobG a écrit :

>> simchajoy2000@yahoo.com a écrit :
>>> Hi,
[quoted text clipped - 6 lines]
> 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

Signature

ASM

Reply to this Message

simchajoy2000@yahoo.com - 31 Oct 2006 04:15 GMT

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!

Reply to this Message

Yvon Thoraval - 31 Oct 2006 07:05 GMT

> Is there any solution for this problem?

yes sure are links and images of the same number ?

Signature

Une Bévue

Reply to this Message

RobG - 31 Oct 2006 08:21 GMT

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

Signature

Rob

Reply to this Message

ASM - 31 Oct 2006 23:34 GMT

simchajoy2000@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 ?

Signature

ASM

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / October 2006

Accessing Image in Another <Div>