How do I create a 'mouseover'...

User 405123 Photo


Registered User
2 posts

I saw something, at the address listed below, that I would like to emulate on my site. I was hoping to get some input on how to get there using the Software Suite that I purchased from you folks last year...at least I believe it was last year!? Really having fun with it too! Learning curve is there...but I digress!

The following address has a 'mouseover' event that opens an 'Info-Bubble' which follows the cursor location until a 'mouseout' event (...at least I believe that is what is occurring?) On the Main Graphic, near the center of the page under the 'Profile' banner, are a couple 'Trinket' regions in the lower right hand corner that use javascript.

When the cursor moves over the empty 'Trinket' regions, (I believe there are two regions which overlap), a separate window opens nearby. The text 'Trinket' is posted in this separate window on a black background. The data posted in the 'Bubble' seems to proportion itself to the data located on the linked .html page that contains the data to be displayed.

I would like to do something similar...but simpler. I would like to have an 'Info-Bubble' pop up when I 'mouseover' a region, and it would be very neat if I could follow the cursor location while focused on that region...but not an absolute 'Must Have' web feature. I would be very, very happy to have several of these 'mouseover' regions scattered about and have the linked html page, containing the data I wish to get, displayed in a static window located near the center of the page...for instance.

I have gone through a half a bottle of Tylenal and spent enough time at the http://www.w3schools.com/ site linked to your 'HTML Editor 2007 Help Links' that those folks are probably thinking about sending me an invoice...or something! L: )

I am not asking anyone to actually write the code for me, I wouldd like to muddle through that myself...but if I could just get a nudge over this hurdle...that would be Fab-U-Lus!

http://armory.worldofwarcraft.com/chara … n=Pergulas

Thanks!

Mike

<script type="text/javascript"><!--
function show(id, cntl)
{
el = document.getElementById(id);

ps...one of your 'Advisors' posted this possible solution to another patron looking for help on the forum...I plan to poke around with this some myself...Thanks Again!
User 364143 Photo


Guest
5,410 posts

There are many scripts that accomplish this. Here is one example. http://website-design.anandsoft.com/fre … -over.html
CoffeeCup... Yeah, they are the best!
User 405123 Photo


Registered User
2 posts

Thanks for the pointer Tom!

Your site looks Fab-U-Lus in my 'Newb' opinion! L; )

I downloaded the popup link you suggested and the results were almost exactly what I was hoping to achieve!

I still have to invest a little more study-time and sort out what the code is up to, (The FireFox browser has a problem with something in there), but you have been of great help to me!

I Appreciate Your Time!

Mike
User 364143 Photo


Guest
5,410 posts

Sorry, I didn't check browsers for that one. here is one that works in IE, FF, Opera, and Safari.

http://www.jdstiles.com/java/imagemenu.html
CoffeeCup... Yeah, they are the best!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.