Need Help with OnMouseOver java script [Archive]

View Full Version : Need Help with OnMouseOver java script

kelfro

11-15-2004, 09:29 PM

Hi,
I am trying to get a script to work on my site and was hoping someone could help! :o

What I want is an image to pop up next to a page link on mouseover. I copy and pasted the script from Javascript.com site on this page.....http://www.javascriptkit.com/script/script2/arrowimage.shtml
It's called Arrow onMouseOver.
I actually had it working at one point and not sure why or when it quit.
It may have quit working right after adding another "image loading" java script, but I have since deleted that script and it still doesn't work. Or it quit after I added another link that was using the Arrow onMouseOver script?

Anyway, if you would like to look at my page's source code please go to....
http://www.nfbotanicals.com/indexpractise2.html

I want the "flower2bulletblue.gif" image to pop up onMouseOver and the "off.gif" to be there onMouseOut.

If anyone has time and an answer I would be very appreciative of your help. OR if you have a better code to use PLEASE let me know!
BTW....I am building my webpage using NETSCAPE COMPOSER 4.8.

Looking forward to hearing from someone!!!! :)
Thanks,
Kelly

codegoboom

11-16-2004, 04:13 AM

Such can be done with JS, or CSS.
Either would involve reconfiguring your source code, so here's an example of how it might be styled:

<html>
<head>
<title>Natural Skin Care products,herbal skin care,natural soaps, herbal soaps,non-toxic skin care, healthy skin, herbal soap,
natural lotions, creams, natural baby care,skincare</title>

<style type="text/css">
#flower
{
font: normal normal bold small normal Veranda;
}

#flower a
{
color: blue;
display: block;
padding-left: 20px;
text-decoration: none;
background-image: url(off.gif);
background-repeat: no-repeat;
}

#flower a:hover
{
color: red;
text-decoration: underline;
background-image: url(flower2bulletblue.gif);
}
</style>
</head>
<body>
<div id="flower">
<a href="soap.html">NaturalSoaps</a>
<a href="lotions.html">Lotions</a>
<a href="balms.html">Healing Balms for Body and Lips</a>
<a href="salts.html">Bath Salts and Scrubs</a>
<a href="oils.html">Natural Body Oils</a>
<a href="aromatherapy.html">Aromatherapy Products</a>
<span style="padding-left:20px;display:block">Natural Perfumes</span>
<a href="nbcare.html">Natural Baby Care</a>
<a href="emu.html">Emu Oil Products</a>
<a href="giftpak.html">Gift Packs</a>
<a href="giftcertificate.html">Gift Certificates</a>
<a href="skincareinfo.html">Skin Care Info</a>
<a href="oilinfo.html">Our Natural Ingredients</a>
<a href="healthlinks.html">Valuable Health & Family Links</a>
<a href="healthlinks.html">About Us</a>
</div>
</body>
</html>

kelfro

11-16-2004, 06:44 AM

Thanks for your help, Codegoboom, but it isn't working :(
Maybe its because I am using netscape composer to build the site with?
If you can, please check my source code and see if it looks right. For some reason composer is not keeping the <div> commands in the code when I save it. :confused:
Kelly

tsguitar2004

11-16-2004, 06:56 AM

Welcome to the forums!

Yeah; without those DIVs in there, that CSS is useless as <insert your own similie here>.

Have you tried moving to handcoding your pages? If Netscape is taking things out that you want kept in, just code the pages yourself. Try copying and pasting the previously suggested code into a regular text editor (Notepad on PC and SimpleText on Mac) and saving the page as an HTML file (change "Save as type..." to "All Files" and type "flowers.html"). Then bring that page up on your browser. Assuming you've put it in the right place relative to your images on your computer (the path to the images should be exactly as written), it should work just fine.
-ts

codegoboom

11-16-2004, 04:32 PM

Well, if you are unable to resolve the issue immediately, by saving it from a text editor, try giving the td element an id of "flower".

<td ALIGN=LEFT VALIGN=TOP WIDTH="150" BGCOLOR="#E1E1FF" id="flower">
<br><a href="soap.html">Soaps</a>


I see that Composer is inserting <br> for each link, so you might also want to remove "display:block;" from the style, because that will cause an extra line to be displayed.