Jump to content
Sign in to follow this  
Lunfalas

All buttons glow at once?

Recommended Posts

Hello to everyone! I'm new here to the forum. I checked all the topics in JavaScript section, but I didn't find any similar question to mine, so...Let's say we have 3 buttons (A, B and C buton) for which we use JavaScript to make them glow or not when we put the mouse pointer over them.This is the JavaScript part for buttons' glow:

function mouseOver(){document.a.src="buttons/a_glow.gif";document.b.src="buttons/b_glow.gif";document.c.src="buttons/c_glow.gif"}function mouseOut(){document.a.src="buttons/a_normal.gif";document.b.src="buttons/b_normal.gif";document.c.src="buttons/c_normal.gif"}

This is the HTML part for calling the functions for buttons:

<a href="page1.html" onmouseOver="mouseOver()" onmouseOut="mouseOut()"><img src="buttons/a_normal.gif" width="105" height="28" border="0" name="a"></a><a href="page2.html" onmouseOver="mouseOver()" onmouseOut="mouseOut()"><img src="buttons/b_normal.gif" width="105" height="28" border="0" name="b"></a><a href="page3.html" onmouseOver="mouseOver()" onmouseOut="mouseOut()"><img src="buttons/c_normal.gif" width="105" height="28" border="0" name="c"></a>

The problem here is, that when we put the pointer over the button 'A' both buttons 'B' and 'C' are glowing too. Same happens if we put the pointer over button 'B' (in this case both 'A' and 'C' are glowing) or over button 'C' (both 'A' and 'B' are glowing).What to do, to achive that only the button, over which the pointer is, glows? a ) Is it needed to make a single function for every button like this?

function mouseOver1(){document.a.src="buttons/a_glow.gif"}function mouseOut1(){document.a.src="buttons/a_normal.gif"}function mouseOver2(){document.b.src="buttons/b_glow.gif"}function mouseOver2(){document.b.src="buttons/b_normal.gif"}(...)

b ) Do we solve the problem any other, more simple way?Thanks in advance for your replies!P.S. Are the functions here ACTUALLY written right? (All the periods, semi-colons, brackets etc. ?) :)

Share this post


Link to post
Share on other sites

try a function like this:

function makeItGlow(obj) {  obj.src="glow.gif"}

and in the mouseover, call the function in this way: makeItGlow(this)you'll pass as an attribute the object itself, so the function can handle it directly

Share this post


Link to post
Share on other sites

I forgot to say - could we do that on the mentioned case? Please? :) I mean, could you show me how the function part should look like and later, how the call tag should look like? I appologize, if I'm asking too much...

Share this post


Link to post
Share on other sites

An easier way of doing it is giving the img tag a onclick="mouseOutthing('a')"In mouseoutthing, type:

function mouseOutthing(blah){var x=document.getElementByIdswitch(blah){case "a"x(blah).src=""break...........}}

And fill in the blanks where the dots are.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...