How can I make a disjointed rollover show up in netscape

phototaker · Mar 20, 2001

I want a rollover of button to bring up a picture - disjointed rollover- which works in IE but seems not to work in netscape. Is there a script that I can use to make the image show up on mouse over in netscape? Thanks for any advise. address is

http://richard.rownak.net/page2.html

link9 · Mar 20, 2001

Here's a script that I found yesterday that works with both IE and NS --

They show it using text, but I'm pretty darn sure it would work with img's, too. After all, as far as html is concerned, an image is really just text (that links to the image you want).

Give it a shot -- pretty easy to set up, too.

good luck!

Paul Prewett

phototaker · Mar 20, 2001

Thanks Paul - am I missing something in your posting? I am not a programmer but I so not see the script you found yesterday. Please advise. Thanks

link9 · Mar 20, 2001

LOL

sorry about that -- I am the WORLD'S WORST for doing that.

enjoy!

http://www.dynamicdrive.com/dynamicindex5/linkinfo.htm

phototaker · Mar 20, 2001

found the instructions, may be easy for you - but I will give it a try - I am still wet behind the ears with this stuff. Thanks Richard

link9 · Mar 20, 2001

those content array elements should hold strings that resemble: "<img src=myPicture.gif>"

Then, you just put in the mouseover actions that they list there on whatever image you want them to be on.

Here's a few sidenotes that may be of help

-- I had to put the strings in double quotes in order for it to work (They have them in single quotes)

-- I also put my default text into another element of content[], and put in an onMouseOut event for the same images that would replace the default content in the desired area... Otherwise, the content that went there on mouseOver stayed (I guess that was just more preference than anything)

If you have trouble, please post here along with the modified code you used, and I'm sure we can get it worked out.

good luck!

Paul Prewett

phototaker · Mar 20, 2001

Paul,
I see the =' <big>Links and buttons</big> which I would think is a syntax I need to use because I am wanting to link a button to an image. I understand that I need to put this syntax into the head, as instructed. Do I put the "<img src= my picture.gif>" in the middle instead of links and buttons or am I really lost? Thanks Richard

link9 · Mar 20, 2001

Nope, you are right one track, my friend....

Except, that the <big> and the following closing tags of the same names are merely formatting tags... If you want your picture to have a line break before it displays, put the ... if you want it to be big (!!!), put the <big>, and if you want it to be bold (double !!!), then put the --

Ya see? Those are just the html tags, so if all you want is the picture to be displayed, then all you need put in is the "<img src=myPicture.gif>". You can get as fancy as you want with all the formatting.

I would suggest just putting the img tag to begin with just so you can get a feel of what's happening there. Then start playing around with formatting.

Keep me posted

paul

phototaker · Mar 20, 2001

Paul, I guess maby I am trying to make this harder that it is,but where do I plave ther "<img src=myPicture.gif>"? is in the <head>? I have seven buttons in the page

http://richard.rownak.net/page2.html.

do I have to put the syntaz in there seven times, one with the name of each image? Sorry for the lack of understanding, I really appreciate the help.
Richard

phototaker · Mar 20, 2001

Paul, I guess maby I am trying to make this harder that it is,but where excally do I put the "<img src=myPicture.gif>"? is in the <head> ? I have seven buttons in the page

http://richard.rownak.net/page2.html.

do I have to put the syntaz in there seven times, one with the name of each image? Sorry for the lack of understanding, I really appreciate the help.
Richard

link9 · Mar 20, 2001

In the head, goes the declaration of the array -- example -- all in head of document:

Code:

<script>
<!--

/*
Textual Tooltip Script- 
© Dynamic Drive ([URL unfurl="true"]www.dynamicdrive.com)[/URL]
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

var content=new Array();
//change the array below to the text associated with your links Expand or contract the array, depending on how many links you have

content[0]=&quot;<img src=pic1.gif>&quot;;
content[1]=&quot;<img src=pic2.gif>&quot;;
content[2]=&quot;<img src=pic3.gif>&quot;;
content[3]=&quot;<img src=pic4.gif>&quot;;
content[4]=&quot;<img src=pic5.gif>&quot;;
content[5]=&quot;<img src=pic6.gif>&quot;;
content[6]=&quot;<img src=pic7.gif>&quot;;

function regenerate(){
window.location.reload();
}
function regenerate2(){
if (document.layers){
appear();
setTimeout(&quot;window.onresize=regenerate&quot;,450);
}
}

function changetext(whichcontent){

if (document.all||document.getElementById){
cross_el=document.getElementById? document.getElementById(&quot;descriptions&quot;):document.all.descriptions;
cross_el.innerHTML='<font face=&quot;Verdana&quot;><small>'+whichcontent+'<font></small>';
}
else if (document.layers){
document.d1.document.d2.document.write('<font face=&quot;Verdana&quot;><small>'+whichcontent+'</small></font>');
document.d1.document.d2.document.close();
}

}

function appear(){
document.d1.visibility='show';
}

window.onload=regenerate2;


//-->
</script>

Everything above goes in head --

Then, you put the following in each of the image tags that you want actions to occur for (actually, I looked at your page, and you already have some mouseovers for those images, so you'll have to separate by commas -- ex: (this code frag was taken off your page)

Code:

onMouseOver=&quot;MM_showHideLayers('TechIMG','','show'), changetext(content[0]);&quot;

And so on... changing the number 0 above with whatever content (you defined in the head) that you wish to appear when the mouse goes over it --

Ok, now for the tricky part -- You are going to have to sort of redefine the div's that you have at the bottom of the html so that they conform to how the script wants them. Should be a bit of a challenge, but it should work ok. This frag was also taken from your page

Code:

<div id=&quot;ArtIMG&quot; style=&quot;position:absolute; left:282px; top:125px; width:282px; height:165px; z-index:9; visibility: hidden&quot;><img src=&quot;Images/muguvenusmoca2.jpg&quot; width=&quot;259&quot; height=&quot;177&quot;></div>
<div id=&quot;Lindsey&quot; style=&quot;position:absolute; left:338px; top:66px; width:174px; height:234px; z-index:10; visibility: hidden&quot;><img src=&quot;Replace%20images/people4.jpg&quot; width=&quot;194&quot; height=&quot;257&quot;></div>
<div id=&quot;EventImg&quot; style=&quot;position:absolute; left:339px; top:84px; width:221px; height:273px; z-index:11; visibility: hidden&quot;><img src=&quot;Replace%20images/events.jpg&quot; width=&quot;193&quot; height=&quot;234&quot;></div>
<div id=&quot;InteriorIMG&quot; style=&quot;position:absolute; left:287px; top:113px; width:246px; height:160px; z-index:12; visibility: hidden&quot;><img src=&quot;Replace%20images/interior4.jpg&quot; width=&quot;247&quot; height=&quot;199&quot;></div>
<div id=&quot;TechIMG&quot; style=&quot;position:absolute; left:287px; top:134px; width:261px; height:186px; z-index:13; visibility: hidden&quot;><img src=&quot;Replace%20images/techharnds.jpg&quot; width=&quot;264&quot; height=&quot;187&quot;></div>
<div id=&quot;NatureIMG&quot; style=&quot;position:absolute; left:281px; top:128px; width:272px; height:180px; z-index:14; visibility: hidden&quot;><img src=&quot;Images/gcnyonwinner2.jpg&quot; width=&quot;295&quot; height=&quot;200&quot;></div>

As you can see, each of those div's have their visible property set to :hidden -- Ok -- that's what the script is changing when you do the mouseovers now...

You will have to replace that whole fragment above with what is in the third text box (on that url I posted) -- that's how this is going to work...

Actually, now that I think about it, I think you are going to have to take out your other onMouseOver events because they will conflict with the new one that you are trying to implement. Not so bad, though (really) -- just replace the onMouseOver events completely with the

changetext(content[0]) 's

so that putting the mouse on them will now call your new functions (that you defined in the head of your document)...

WHEEEEWEEEEEEE -- was that mouthful or what?

I hope this helps you out, and I hope it made at least some sense. (I'm no teacher)

let me know

paul

phototaker · Mar 20, 2001

Well I removed the show/hide from the behavior controls in dreamweaver as to not confuse matters. I placed the content from your posting in the head and have changed the code several different ways, but I just do not seem to be getting the onMouseOver to work in netscape. I saved the changes to a document page 3, so I still have page 2. I have put the page up at

http://richard.rownak.net/page3.html.

If you can help - please advise. Thanks Richard

oldnewbie · Mar 20, 2001

They seem to be loading...(at least according to the status bar), they're just not visible on rollover!

But in test 3, you now have a problem with IE too! Don't see them pictures anymore! Syntax error in line 7!

;-)

link9 · Mar 21, 2001

One blank post... whoops... anyways, I looked at your page, and it's hard to follow where all your div's are and whatnot... I'm assuming that the page was made in Dreamweaver or something. Dreamweaver's great, but the code is sometime hard to decipher -- at least for me.

I did the best I could with it, and below is the code that I came up with. Save it (in its entirety) as page4.html, and let me know how it works out... If this doesn't work, then we're probably gonna have to leave this up to "more experienced professionals". I don't know what else to do with it.

Note the 'ilayers' part at the bottom. That is where your content will show up. Also note the changes that I made to the contents of the contents array. Also note where I put in the onMouseOver's and the onMouseOut's... That may help you in fixing it if this doesn't work properly.

If it doesn't work, then I would suggest setting this whole thing up in a two column table. The column on the left will contain another table that will contain all of your buttons. The column on the right will consist of ONLY the ilayer that will be changing onMouseOver and onMouseOut.

See how that would simplify things??? I'm just afraid that with the way this is set up, it's not going to display properly.

One more note -- down in the eighth [7] element of the array, this post is showing that as blank because it is interpreting the -- & n b s p ; -- (without the spaces) that I put in there. Please replace that so that when the mouse goes off the buttons, the pictures will disappear.

**crosses fingers**

Code:

<html>
<head>
<title>Photography & Digital </title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<script language=&quot;JavaScript&quot;>
<!--
<script>
<!--

/*
Textual Tooltip Script- 
© Dynamic Drive ([URL unfurl="true"]www.dynamicdrive.com)[/URL]
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

var content=new Array();
//change the array below to the text associated with your links Expand or contract the array, depending on how many links you have

content[0]=&quot;<img src=Images/muguvenusmoca2.jpg>&quot;;
content[1]=&quot;<img src=Images/people4.jpg>&quot;;
content[2]=&quot;<img src=Images/events.jpg.gif>&quot;;
content[3]=&quot;<img src=Images/interior4.jpg>&quot;;
content[4]=&quot;<img src=Images/techharnds.jpg>&quot;;
content[5]=&quot;<img src=Images/gcnyonwinner2.jpg>&quot;;
content[6]=&quot;<img src=Images/carla.jpg>&quot;;
content[7]=&quot; &quot;

function regenerate(){
window.location.reload();
}
function regenerate2(){
if (document.layers){
appear();
setTimeout(&quot;window.onresize=regenerate&quot;,450);
}
}

function changetext(whichcontent){

if (document.all||document.getElementById){
cross_el=document.getElementById? document.getElementById(&quot;descriptions&quot;):document.all.descriptions;
cross_el.innerHTML='<font face=&quot;Verdana&quot;><small>'+whichcontent+'<font></small>';
}
else if (document.layers){
document.d1.document.d2.document.write('<font face=&quot;Verdana&quot;><small>'+whichcontent+'</small></font>');
document.d1.document.d2.document.close();
}

}

function appear(){
document.d1.visibility='show';
}

window.onload=regenerate2;


//-->
</script>
<body background=&quot;Images/bluegridtriangle3colors.gif&quot; vlink=&quot;#FF0000&quot; alink=&quot;#00FF00&quot;>
<style type=&quot;text/css&quot;>
<!--
-->
</style>
<div id=&quot;Rownak&quot; style=&quot;position: absolute; left: 13px; top: 26px; width: 520px; height: 24px; z-index: 1; visibility: visible&quot;><b><font face=&quot;Times New Roman, Times, serif&quot; size=&quot;5&quot; color=&quot;#FF0000&quot;>	
  </font><font color=&quot;#FF0000&quot; size=&quot;+2&quot; face=&quot;Times New Roman, Times, serif&quot;><strong>ROWNAK 
  PHOTOGRAPHY & DIGITAL</strong></font></b></div>
<div id=&quot;Tag&quot; style=&quot;position: absolute; left: 19px; top: 50px; width: 251px; height: 36px; z-index: 2; visibility: visible&quot;> 
  <p><i><font face=&quot;Verdana, Arial, Helvetica, sans-serif&quot; size=&quot;2&quot; color=&quot;#FFFF00&quot;>Photography 
    & Graphic Design </font></i></p>
  <p><font size=&quot;2&quot; face=&quot;Verdana, Arial, Helvetica, sans-serif&quot; color=&quot;#FFFF00&quot;><i>for 
    a visual hungry world</i></font></p>
</div>
<div id=&quot;People&quot; style=&quot;position: absolute; left: 76px; top: 196px; width: 51px; height: 50px; z-index: 4; visibility: visible&quot;><object classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; codebase=&quot;[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0&quot;[/URL] width=&quot;50&quot; height=&quot;50&quot; onMouseOver=&quot;changetext(content[0]);&quot; onMouseOut=&quot;changetext(content[7]);&quot;>
    <param name=movie value=&quot;Assets/peoplenewbutton.swf&quot;>
    <param name=quality value=high>
    <embed src=&quot;Assets/peoplenewbutton.swf&quot; quality=high pluginspage=&quot;[URL unfurl="true"]http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash&quot;[/URL] type=&quot;application/x-shockwave-flash&quot; width=&quot;50&quot; height=&quot;50&quot;>
    </embed> 
  </object></div>
<div id=&quot;Art&quot; style=&quot;position: absolute; left: 23px; top: 143px; width: 50px; height: 50px; z-index: 3; visibility: visible&quot;><object classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; codebase=&quot;[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0&quot;[/URL] width=&quot;50&quot; height=&quot;50&quot; onMouseOver=&quot;changetext(content[1]);&quot; onMouseOut=&quot;changetext(content[7]);&quot;>
    <param name=movie value=&quot;Assets/artnewbutton.swf&quot;>
    <param name=quality value=high><onMouseOver changetext(content[0]>
    ><embed src=&quot;Assets/artnewbutton.swf&quot; quality=high pluginspage=&quot;[URL unfurl="true"]http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash&quot;[/URL] type=&quot;application/x-shockwave-flash&quot; width=&quot;50&quot; height=&quot;50&quot;>
    </embed> 
  </object></div>
<div id=&quot;Event&quot; style=&quot;position:absolute; left:129px; top:251px; width:50px; height:50px; z-index:5; visibility: visible&quot;><object classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; codebase=&quot;[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0&quot;[/URL] width=&quot;50&quot; height=&quot;50&quot; onMouseOver=&quot;changetext(content[2]);&quot; onMouseOut=&quot;changetext(content[7]);&quot;>
    <param name=movie value=&quot;Assets/eventsnewbutton.swf&quot;>
    <param name=quality value=high>
    <embed src=&quot;Assets/eventsnewbutton.swf&quot; quality=high pluginspage=&quot;[URL unfurl="true"]http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash&quot;[/URL] type=&quot;application/x-shockwave-flash&quot; width=&quot;50&quot; height=&quot;50&quot;>
    </embed> 
  </object></div>
<div id=&quot;interiors&quot; style=&quot;position:absolute; left:183px; top:303px; width:53px; height:53px; z-index:6; visibility: visible&quot;><object classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; codebase=&quot;[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0&quot;[/URL] width=&quot;50&quot; height=&quot;50&quot; onMouseOver=&quot;changetext(content[3]);&quot; onMouseOut=&quot;changetext(content[7]);&quot;>
    <param name=movie value=&quot;Assets/interiorsnewbutton.swf&quot;>
    <param name=quality value=high>
    <embed src=&quot;Assets/interiorsnewbutton.swf&quot; quality=high pluginspage=&quot;[URL unfurl="true"]http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash&quot;[/URL] type=&quot;application/x-shockwave-flash&quot; width=&quot;50&quot; height=&quot;50&quot;>
    </embed> 
  </object></div>
<div id=&quot;Nature&quot; style=&quot;position:absolute; left:74px; top:308px; width:52px; height:52px; z-index:7; visibility: visible&quot;><object classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; codebase=&quot;[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0&quot;[/URL] width=&quot;50&quot; height=&quot;50&quot; onMouseOver=&quot;changetext(content[4]);&quot; onMouseOut=&quot;changetext(content[7]);&quot;>
    <param name=movie value=&quot;Assets/naturenewbutton.swf&quot;>
    <param name=quality value=high>
    <embed src=&quot;Assets/naturenewbutton.swf&quot; quality=high pluginspage=&quot;[URL unfurl="true"]http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash&quot;[/URL] type=&quot;application/x-shockwave-flash&quot; width=&quot;50&quot; height=&quot;50&quot;>
    </embed> 
  </object></div>
<div id=&quot;Technical&quot; style=&quot;position:absolute; left:21px; top:252px; width:52px; height:51px; z-index:8; visibility: visible&quot;><object classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; codebase=&quot;[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0&quot;[/URL] width=&quot;50&quot; height=&quot;50&quot; onMouseOver=&quot;changetext(content[5]);&quot; onMouseOut=&quot;changetext(content[7]);&quot;>
    <param name=movie value=&quot;Assets/technicalnewbutton.swf&quot;>
    <param name=quality value=high>
    <embed src=&quot;Assets/technicalnewbutton.swf&quot; quality=high pluginspage=&quot;[URL unfurl="true"]http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash&quot;[/URL] type=&quot;application/x-shockwave-flash&quot; width=&quot;50&quot; height=&quot;50&quot;>
    </embed> 
  </object></div>


  	<ILAYER id=&quot;d1&quot; width=&quot;200&quot; height=&quot;200&quot; visibility=&quot;hide&quot;>
        <LAYER id=&quot;d2&quot; width=&quot;200&quot; height=&quot;200&quot;>
        <div id=&quot;descriptions&quot; align=&quot;center&quot;>

          

        </div>
        </LAYER>
        </ILAYER>


<div id=&quot;Layer1&quot; style=&quot;position:absolute; left:498px; top:397px; width:122px; height:15px; z-index:15; visibility: visible&quot;><i><font color=&quot;#1FFF0F&quot;><a href=&quot;welcome.html&quot;><u>Back 
  to Home</u></a></font></i></div>
<div id=&quot;Wedding&quot; style=&quot;position:absolute; left:17px; top:363px; width:50px; height:54px; z-index:17; visibility: visible&quot;><object classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; codebase=&quot;[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0&quot;[/URL] width=&quot;50&quot; height=&quot;50&quot; onMouseOver=&quot;changetext(content[6]);&quot; onMouseOut=&quot;changetext(content[7]);&quot;>
    <param name=movie value=&quot;Assets/weddingnewbutton.swf&quot;>
    <param name=quality value=high>
    <embed src=&quot;Assets/weddingnewbutton.swf&quot; quality=high pluginspage=&quot;[URL unfurl="true"]http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash&quot;[/URL] type=&quot;application/x-shockwave-flash&quot; width=&quot;50&quot; height=&quot;50&quot;>
    </embed> 
  </object></div>
<div id=&quot;Layer2&quot; style=&quot;position:absolute; left:138px; top:400px; width:169px; height:24px; z-index:19; visibility: visible&quot;><a href=&quot;mailto:phototaker@aol.com&quot;><font color=&quot;#1EFF1E&quot; size=&quot;-1&quot;><i><u>E-MAIL 
  US HERE</u></i></font></a></div>
</body>
</html>

phototaker · Mar 21, 2001

Paul,
ole buddy I will have to give you an A+ for effort and tell you how much I appreciate your effort to get this page to work. I have been messing with it for hours and just can not seem to get it to do what I want, which is a simple disjointed rollover between a button and layer in netscape. I will keep working with it and will try the tables suggestion you made earlier, if I can not work it out with my design. I have lots of patience and determinatin but not near enough experience or expertise yet, I suppose. I sent my revised page 4 to the server so I could check it out from there. The button names and dimentions are in there, seems to me, too many times but when I take one of them out, the buttons do not show up, oh well. I feel you have gone well above or overboard in your efforts and time but If you come up with any ideas in the future or talk to someone who may have suggestions I am at phototaker@aol.com. Thanks again so much. If I can ever help you out with anything, please let me know. Richard

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How can I make a disjointed rollover show up in netscape

phototaker

Technical User

link9

Programmer

phototaker

Technical User

link9

Programmer

phototaker

Technical User

link9

Programmer

phototaker

Technical User

link9

Programmer

phototaker

Technical User

phototaker

Technical User

link9

Programmer

phototaker

Technical User

oldnewbie

Technical User

link9

Programmer

phototaker

Technical User

Similar threads

Part and Inventory Search

Sponsor