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!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How can I make a disjointed rollover show up in netscape

Status
Not open for further replies.
phototaker

phototaker

Technical User
Joined
Mar 6, 2001
Messages
126
Location
US
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
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
those content array elements should hold strings that resemble: &quot;<img src=myPicture.gif>&quot;

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
 
Upvote 0 Downvote
Paul,
I see the ='<br><big><b>Links and buttons</b></big><br> 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 &quot;<img src= my picture.gif>&quot; in the middle instead of links and buttons or am I really lost? Thanks Richard
 
Upvote 0 Downvote
Nope, you are right one track, my friend....

Except, that the <br><big><b> 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 <br>... if you want it to be big (!!!), put the <big>, and if you want it to be bold (double !!!), then put the <b> --

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 &quot;<img src=myPicture.gif>&quot;. 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
 
Upvote 0 Downvote
Paul, I guess maby I am trying to make this harder that it is,but where do I plave ther &quot;<img src=myPicture.gif>&quot;? is in the <head>? I have seven buttons in the page 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
 
Upvote 0 Downvote
Paul, I guess maby I am trying to make this harder that it is,but where excally do I put the &quot;<img src=myPicture.gif>&quot;? is in the <head> ? I have seven buttons in the page 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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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 If you can help - please advise. Thanks Richard
 
Upvote 0 Downvote
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!

;-)
 
Upvote 0 Downvote
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 &quot;more experienced professionals&quot;. 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>
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
1K
xwb
xwb
Mike Lewis
  • Locked
  • Question Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
5
Views
2K
Mike Lewis
Mike Lewis
penguinspeaks
  • Locked
  • Question Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb
Rayj0000
  • Locked
  • Question Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
864
Rayj0000
Rayj0000

Part and Inventory Search

Sponsor

Back
Top