Solved

Dynamic Images

Posted on 1998-11-02
2
176 Views
Last Modified: 2010-04-09
I'm trying to create dhtml code which when I roll over certain words, 3 images in a different frame change.

Please help.

Antony
0
Comment
Question by:antony061897
  • 2
2 Comments
 
LVL 4

Accepted Solution

by:
rafistern earned 100 total points
ID: 1839352
This will work in IE4 and NS4:

<layer onmouseover="parent.otherFrame.document.images[0].src='new_url.gif'" onmouseout="parent.otherFrame.document.images[0].src='old_url.gif'">
<span onmouseover="parent.otherFrame.document.images[0].src='new_url.gif'" onmouseout="parent.otherFrame.document.images[0].src='old_url.gif'">
The words
</span>
</layer>

The layer tag is for NS4, the span for IE4.

You could write all this with a javascript:

<script language=javascript1.2>
if(navigator.appName="Netscape")
  tagname="span"
else
  tagname="layer"

document.write("<"+tagname+" onmouseover='parent.otherFrame.document.images[0].src=\"new_url.gif\"' onmouseout='parent.otherFrame.document.images[0].src=\"old_url.gif\"'>");
document.write("The words");
document.write("</"+tagname+">");

</script>

0
 
LVL 4

Expert Comment

by:rafistern
ID: 1839353
Here is aslightly neater javascript version taking into account all 3 images:

<script language=javascript1.2>
function changeSrc(imgName,srcURL){
  eval("parent.otherFrame.document."+imgName+".src='"+srcURL+"'");
}


if(navigator.appName="Netscape")
  tagname="span"
else
  tagname="layer"

document.write("<"+tagname+" onmouseover='changeSrc(\"image1\",\"new_src1.gif\");changeSrc(\"image2\",\"new_src2.gif\");changeSrc(\"image3\",\"new_src3.gif\");' onmouseout='changeSrc(\"image1\",\"old_src1.gif\");changeSrc(\"image2\",\"old_src2.gif\");changeSrc(\"image3\",\"old_src3.gif\");'>");
document.write("The words");
document.write("</"+tagname+">");

</script>

where 'image1' etc are names given to images in the other frame and 'new_src1.gif' etc are urls of image files.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now