FRAMES: rollover IMG links

**davidengel** · 11-11-2003, 05:45 PM

Okay. I have images in the bottom frame, "B" and a navigational bar on the top, "A". I want to make it so when I rollover or click an image in "B", descriptive text appears in "A". I just can't figure it out, and I am not sure if it is something I can do with HTML or if I have to do it with Java. Maybe it's impossible too. Basically, I have lots of images and don't feel like doing the old-fashioned Target= stuff because then I would have to make a separate .htm for each image. Any suggestions are greatly appreciated!

Thanks!

**QuietDean** · 11-11-2003, 06:22 PM

Hi there, welcome to the forums.

You can access a page via JavaScript (not Java) by accessing the parent object, eg -

HTML Code:

onclick="parent.framename.imagename.src='stoat.jopg';"

**davidengel** · 11-11-2003, 07:57 PM

I do not know how to put this code into action -- would it be at all possible for you to briefly explain to me what this code means? As in, which parts of the code need to be amended in order for it to make sense on my page?

Thanks again

**QuietDean** · 11-12-2003, 05:46 AM

Sorry, you haven't showed me your page or your code, so I can only be vague.

If you post some more details I can help more.

**davidengel** · 11-12-2003, 10:50 PM

Thanks for sticking with me here. I hope I can articulate my problem a little bit better this time around. Here's the address:

http://www.redrival.com/davidengel/photos.htm
---------------------HERES THE CODE---------------
<html>
<head>
<title>Photos</title>
</head>
<body bgcolor="#99ccff" text="003399" link="goldenrod" alink="white" vlink="silver">
<font face="futura md bt, arial, helvetica">

<br><BR>
<CENTER>

<table cellpadding="4">

<TD bgcolor="black">
<a href="spsign1.jpg">
<img height="60" width="40" src="spsign1.jpg" border=0></a>
<a href="spsign2.jpg">
<img height="60" width="40" src="spsign2.jpg" border=0></A>
Menace in the dorm, 10/03</td>

<TD bgcolor="black">
<a href="rob.jpg" border=0>
<img height="60" width="40" src="rob.jpg" border=0></A>
Roommate, 10/30/03</TD>

<TR>
<TD bgcolor="black">
<a href="brian.jpg">
<img height="60" width="40" src="brian.jpg" border=0></a>
<a href="brian1.jpg">
<img height="60" width="40" src="brian1.jpg" border=0></A>
Brian, our pet, 10/03

<TD bgcolor="black">
<a href="blocked.jpg">
<img height="60" width="40" src="blocked.jpg" border=0></a>
Picture of Me in the dorm, 9/03
</TABLE>
<CENTER><h1>Photos</h1></CENTER>
Run the mouse over the picture and you will see a description above

---------------------------------------------------------

OK. So I am using HTML frames (the only ones I am familiar with) and I have jpgs that, right now when you click them, open the photo in the "B" window (the blue one). That's just fine. I just want it so when you click on the photo, it will display text in the "A" window (the skinny dark red one) giving a description of the photo. I am sure there is some way to do this, and I would love to hear ANY ideas on how to go about it as long as they don't require that I make individual pages for each photo. I am not very familiar with JavaScript, so if you could explain the parts which I need to amend it would make it 10x easier for me. I REALLY appreciate your help!

**QuietDean** · 11-13-2003, 03:36 AM

Hiya. I'll need the framesets code too

**davidengel** · 11-13-2003, 06:08 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<title>Photos</title>

<FRAMESET ROWS="*,96%" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">
<FRAME NAME="A" SRC="http://www.redrival.com/davidengel/photobar.htm" MARGINWIDTH="3" MARGINHEIGHT="10" SCROLLING="no">
<FRAME NAME="B" SRC="http://www.redrival.com/davidengel/photos2.htm" MARGINWIDTH="3" MARGINHEIGHT="10">
</FRAmESET>
</html>

**QuietDean** · 11-13-2003, 06:31 PM

Heres a link that will write to frame A when clicked in frame B

HTML Code:

<a href="javascript:void(0);" onClick="parent.A.document.write('<h3>Ahha!</h3>');">Ahha!</a>

**davidengel** · 11-13-2003, 09:33 PM

HERES ALL THE CODE I AM USING NOW

•1. ORIGINAL FRAMESET PAGE ---------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<title>Photos</title>

<FRAMESET ROWS="*,96%" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">
<FRAME NAME="A" SRC="http://www.redrival.com/davidengel/photobar.htm" MARGINWIDTH="3" MARGINHEIGHT="10" SCROLLING="no">
<FRAME NAME="B" SRC="http://www.redrival.com/davidengel/photos2.htm" MARGINWIDTH="3" MARGINHEIGHT="10">
</FRAmESET>
</html>
--------------------END OF FRAMESET PAGE(http://www.redrival.com/davidengel/photos.htm)
•2. BOTTOM FRAME, photos2.htm----------------------

<html>
<head>
<title>Photos</title>
</head>
<body bgcolor="#99ccff" text="003399" link="goldenrod" alink="white" vlink="silver">
<font face="futura md bt, arial, helvetica">

<table cellpadding="4">
<TD BGCOLOR="black">

<a href="http://www.freewebs.com/davidengel/closet.jpg" onClick="parent.A.document.write('My kitchenette.');">
<img height="60" width="40" src="http://www.freewebs.com/davidengel/closet.jpg" border=0></a>

<a href="http://www.freewebs.com/davidengel/frombed.JPG" onClick="parent.A.document.write('View from my bed');">
<img height="60" width="40" src="http://www.freewebs.com/davidengel/frombed.JPG" border=0></a>

<a href="http://www.freewebs.com/davidengel/fromdesk.JPG" onClick="parent.A.document.write('View from my desk.');">
<img height="60" width="40" src="http://www.freewebs.com/davidengel/fromdesk.JPG" border=0></A><BR>
My room 11/12/03</td>

<TD bgcolor="black">
<a href="spsign1.jpg" onClick="parent.A.document.write('Sign located in the lobby of my dorm');">
<img height="60" width="40" src="spsign1.jpg" border=0></a>
<a href="spsign2.jpg" onClick="parent.A.document.write('Another sign that Rhode Island`s finest are in town');">
<img height="60" width="40" src="spsign2.jpg" border=0></A><BR>
Menace in the dorm, 10/03</td>

<TD bgcolor="black">
<a href="rob.jpg" border=0 onClick="parent.A.document.write('My roommate');">
<img height="60" width="40" src="rob.jpg" border=0></A><BR>
Roommate, 10/30/03</TD>

<TR>
<TD bgcolor="black">
<a href="brian.jpg" onClick="parent.A.document.write('My pet hamster.');">
<img height="60" width="40" src="brian.jpg" border=0></a>
<a href="brian1.jpg" onClick="parent.A.document.write('Who`s the man?');">
<img height="60" width="40" src="brian1.jpg" border=0></A>
Brian, our pet, 10/03

<TD bgcolor="black">
<a href="blocked.jpg" onClick="parent.A.document.write('Weird stuff, man.');">
<img height="60" width="40" src="blocked.jpg" border=0></a>
Picture of Me in the dorm, 9/03
</TABLE>
<CENTER><h1>Photos</h1></CENTER>
Click the picture you wish to see and you will see a description above

--------------------------END OF BOTTOM FRAME, B(http://www.redrival.com/davidengel/photos2.htm)

•3. TOP NAVIGATIONAL BAR--------------------------

<html>
<body bgcolor="darkred" text="#FFFFFF" <body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<font face="zurich ex bt"><table>
<TABLE>
<td VALIGN="top">
<CENTER>Photo description:</center>
</td>
</table>
</font>

</body>
</html>
-------------------------END OF NAV. BAR, A
(http://www.redrival.com/davidengel/photobar.htm)

So, as you can see, when the images are clicked, indeed it does display text in the "A" frame, which is exactly what I wanted... I am just curious now as to how to clear the A frame when I click a different picture. Otherwise all that happens is the text builds up and the names of previously clicked images are still there. I need the top frame to get refreshed (clear the text) when I click on a new picture. I tried some things already, like return true, but I cannot figure it out. Like I said, I am pretty inexperienced, so that's why I am just dragging along on this one. I am confident that you can help me out -- I appreciate your help SO MUCH.

Thanks
Dave

Thread: FRAMES: rollover IMG links

Thread Tools

Related

CSS Image rollover?? Forum: CSS Forum

rollover and the like Forum: HTML Forum

rollover images as links Forum: Graphics Forum

Please help me w/ Multiple Rollover Links II script!! Forum: Javascript Forum

targeting links on frames Forum: HTML Forum

FRAMES: rollover IMG links

Here is the code for the frameset

Script Looks Good, only one more question

Tags for this Thread