LinuxQuestions.org - How to do a mouseover effect?

- Programming (https://www.linuxquestions.org/questions/programming-9/)

- - How to do a mouseover effect? (https://www.linuxquestions.org/questions/programming-9/how-to-do-a-mouseover-effect-798918/)

How to do a mouseover effect?

Hi,
I have a set of buttons on my webpage, which I'd like to sort of, brighten, if the mouse moves over them. How would I do this in Javascript?

Apologies for the absolutely *newbie* question, but I just don't know how to do this.

Thanks.

not quite what yer looking for but a starting point perhaps
the following is code to collapse a div but gives you the basic idea of how to modify css attributes with javascript perhaps
create a brigtenbutton.js with element.bgcolor or something like that (function bright pick a brighter color function dim pick the original color

Code:

function brighten() {

if (document.getElementById) { // DOM3 = IE5, NS6

document.getElementById('element_to_brighten').style.visibility = 'hidden';

document.getElementById("element_to_brighten").style.height = '0px';

}

else {

if (document.layers) { // Netscape 4

document.hideshow.visibility = 'hidden';

}

else { // IE 4

document.all.hideshow.style.visibility = 'hidden';

}

}

}



function dim() {

if (document.getElementById) { // DOM3 = IE5, NS6

document.getElementById('element_to_brighten').style.visibility = 'visible';

document.getElementById("element_to_brighten").style.height = '450px';

}

else {

if (document.layers) { // Netscape 4

document.hideshow.visibility = 'visible';

}

else { // IE 4

document.all.hideshow.style.visibility = 'visible';

}

}

}

then you give the button element an <element id='element_to_brighten' onmouseover='brighten()' onmouseout='dim()'>

then in the <head> section put

Code:

<script type="text/javascript" src="brigtenbutton.js"></script>

Quote:

Originally Posted by resetreset (Post 3918078)

Basically what you want is and image rollover effect, and there are quite a few tutorials:

http://www.groan-zone.net/jscript/mouseover.html

I did something like this really quick on one of my web pages:

Code:

<a href="/cgi-bin/pages/get?view=lusus">

<table class="btn_h" onmouseover="roll('btn001', '/img/btn_light_on.png')" onmouseout="roll('btn001', '/img/btn_light_off.png')"><tr><td>

<img class="btn_light" src="/img/btn_light_off.png" alt="go button" name="btn001" />

</td><td>Lusus</td></tr></table></a>



<a href="/cgi-bin/pages/get?view=scripts">

<table class="btn_h" onmouseover="roll('btn002', '/img/btn_light_on.png')" onmouseout="roll('btn002', '/img/btn_light_off.png')"><tr><td>

<img class="btn_light" src="/img/btn_light_off.png" alt="go button" name="btn002" />

</td><td>Scripts</td></tr></table></a>

I'm not much of a web designer though. There is probably a lot that could be done here to really simplify this, so that you didn't need so much code for each button. You also might want to consider using a javascript development library instead, like YUI (http://developer.yahoo.com/yui/)

Does it have to be javascript? Anything wrong with using css?

How would you do it in CSS?

The menu links on here are done in css - http://www.h-baa.net/.
Basically you have an image which consists of two images, one above the other and make it so only one is visible as the background and then on the link hover psuedoclass you shift the image up by x pixels to show the other part of the image.
It just involves far less code, no image pre-loading etc and is a lot easier to understand! :)
Here is some example code from the website above for the nav links:

Code:

 <ul>

                        <li><a href="./index.php" class="default">Home</a></li>

                        <li><a href="./water1.php" class="default">Waters</a>

                                <ul id="submenu_waters">

                                        <li><a href="./water1.php" class="water">Butts Mill</a></li>

                                        <li><a href="./water2.php" class="water">Clarendon Street</a></li>

                                        <li><a href="./water3.php" class="water">Kearns Allens</a></li>

// and so on

and the css

Code:

#nav_bar a.default:link, a.default:visited {

        display: block;

        padding: 10px 0 10px 42px;

        font: bold 10pt Arial, Helvetica, sans-serif;

        color: #CC6611;

        background: url("../images/nav_fish2.png") top left no-repeat;

        text-decoration: none;

}



#nav_bar a.water:hover {

        background-position: 0 -41px;

        color: #0000BB;

}

I fully support this method. The code is a lot cleaner and not having to deal with image pre-loading is a definite advantage.