better rollovers

[liptonlover]

I know nothing of java or html except the basics for forum use, but I wanted rollovers. So I followed a tutorial and got them working on my website.
here's the code.

<script type="text/javascript">
function mouseOver()
{
document.rollover_one.src ="http://web.me.com/lipton_lover/Site/Blank_files/pressed.png"
}
function mouseOut()
{
document.rollover_one.src ="http://web.me.com/lipton_lover/Site/Blank_files/unpressed.png"
}
</script>
<a href="http://web.me.com/lipton_lover/Eversoft/Home.html">
<img alt="Eversoft downloads" src="http://web.me.com/lipton_lover/Site/Blank_files/unpressed.png" name="rollover_one" width="120" height="40" onmouseover="mouseOver()" onmouseout="mouseOut()" style="border: none;"/></a>

It works great, it makes my website look so much better. But as you can see if you visit my site, http://web.me.com/lipton_lover/Eversoft/Home.html
It doesn't always go back to the unpressed image when it's supposed to. This happens especially when I move the mouse sideways right to another button. Is there a way to improve the code I already have, or use another person's code to fix this problem?

 

[Me1000]

You are not using java you are using javascript...

just use css for it,

you have the css class

.button1{
background-image: url('image.gif'); /*this is the image*/
text-indent: -9999999999999px /*this prevents the text from being displayed*/
}

and then for the over state,

.button1:hover{
background-image: url('image_over.gif'); /*the image changes on the hover state...*/
}

then for the html you need to use a block element, and define the class for it...

 

[liptonlover]

sorry I forgot to mention I'm just doing an html snippet in iweb. This is an iweb website. I don't know how to add css.

 

[SrWebDeveloper]

If you have iWeb 08 you can follow the instructions in this link which uses the HTML snippets function as you noted. You can't do this in any other version for others following this topic, iWeb maintains all rollovers for you based on the theme/template - you'd have to export the HTML then manually edit, and not be able to re-import.

In iWeb 08 simply put all Javascript, HTML and CSS in the same HTML snippet dialog, i.e. use the <script> tag for any JavaScript and <style> tag for the CSS (just don't use any selectors already named in any existing stylesheets used by your template, i.e. any .css file generated if you were to export). This method breaks strict XHMTL syntax if you care about such things, but it will work just fine for your users.

On a side note the advice given by Me1000 is *excellent* and a great alternative to your JavaScript and even the link I suggested, i.e. less code and works reliably using CSS instead of JavaScript. I just included the link as another suggestion for you if you don't know CSS at all. Compare and customize, have fun. But if it were me I'd use Me1000's method!

-jim

 

[liptonlover]

I saw that tutorial already... it's 99.999% identical to the one I ended up following so it's not going to fix my problem.

His does look neater, but reading his post suggests it's not all the code I need. And like I said, I have absolutely no html, java, javascript, css, php, etc. knowledge/experience. For this to work I really need to be handed the code.

 

[&Ingonyama]

@liptonlover

Use a <span></span> around the text instead of using text-indent in the css file (it can push the whole button in some browsers (IE)). Then just hide the text using:

.button1 span
{
  display: none;
}

 

[memco]

Slightly OT, but for those who understand the CSS mentioned consider this article: http://htmldog.com/articles/suckerfish/dropdowns/. This article shows the cleanest and most efficient way to effectively create css hovers that I've seen to date. It works across everything back to IE 5.5 (haven't personally tested), and avoids rendering and accessability issues associated with hiding using display: none.