Accessing Image in Another <Div>

S

simchajoy2000

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
 
A

ASM

(e-mail address removed) 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:
Click to expand...

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')"
<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");
}
}
Click to expand...

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>
Click to expand...

<a href="Peterson.html"
onmouseover="showImg('a_1','roll_a'); showImg('b_1','roll_b')"
<b>REPRESENTATIVE PROJECTS</b>
Click to expand...
</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.
Click to expand...

of course : you don't give name of the object !
 
A

ASM

RobG a écrit :
CSS rollovers are considerably simpler, very few new sites use scripted
rollovers:
Click to expand...

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
 
S

simchajoy2000

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

RobG

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>.
Click to expand...

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??
Click to expand...

I can't see what you don't post.

Is there any solution for this problem?
Click to expand...

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

ASM

(e-mail address removed) a écrit :
Thank you but all that doesn't actually answer my question.
Click to expand...

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??
Click to expand...

I did see ... and did give you several solutions
Is there any solution for this problem?
Click to expand...

I did have corrected your script ...

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Align separate li to right 2
I am trying to detect Which image id="" was clicked ? 22
Image not changing between "mute" & "un-mute" images. 5
Help with Visual Lightbox: Scripts 2
Put image over the top of another image on hover 3
How do I fix this issue in sqaurespace code block? 1
Image shifts to the right when export the page to pdf 4
Align img inside nav tabs section 5

Members online

No members online now.
Total: 62 (members: 1, guests: 61)
Robots: 445

Forum statistics

Threads
473,989
Messages
2,570,207
Members
46,783
Latest member
RickeyDort

Latest Threads

Top