Help with mouseovers

  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

Ok if I have linkA linkB and linkC and when the mouse goes over them I want it them to change to say linkF linkG and linkH. Would I have to use images? or is there a way to do it with just the links themselves? Thanks ;)
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Posts: 6376
  • Loc: twitter.com/unflux

Post 3+ Months Ago

moved cuz this is more of a design question...although it involves some
programming :?

anyway...Images and a mouseover javascript is probably the
best/easiest way to this. I know it's been discussed before, so just do
a search on ozzu for it. Google isn't a bad place to look either.

You using notepad, dreamweaver? what are you using to edit the html?
  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

Oh sorry for putting it in the wrong place lol

Ok cool thanks, I figured I would have to use images but was just seeing. I will look around. and yeah I am using notepad.

Thanks ;)
  • Cuerock
  • Expert
  • Expert
  • Cuerock
  • Posts: 540
  • Loc: My cubical

Post 3+ Months Ago

http://www.funky-chickens.com

Might help also!
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

you can do this with the innerText property...I think... I really don't know javascript all that well but you "should" be able to go like this:

Code: [ Select ]
<a href="link1.html" onMouseOver="document.all.link1.innerText='text2'"><span id="link1">Text</span></a>
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

That will work with IE but innerText (and I think document.all) won't work with Mozilla/Netscape. I think getElementById and innerHTML might be preferable.

Code: [ Select ]
<a href="link1.html" onMouseOver="document.getElementById('link1').innerHTML='LinkF'" onMouseOut="document.getElementById('link1').innerHTML='LinkA'"><span id="link1">LinkA</span></a>
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

cool! I need to remember that getElementByID function...I always forget it! :-P
  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

Thanks so so much ;) It works I love it ;) Very neat. Only problem now I am having now is with the visted link color screwing up the hover color lol. Well can't win it all I guess ;)

And also thank you I did search google and founda very neat website that is a CSS MouseOver Link Generator, makes it very easy :)

Thanks again ;)
  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

Ok could actually use a little bit more help ;( I am feeling like this is impossible to fix and it is kindof annoying lol. My problem is that I want link to be xsize & xcolor and then with the mouseover i want it to be ysize and ycolor but the stupid visited link is screwing it up. If I make the visited link a color if I click the link it changes both to that. If i don't add it then it goes to like normal ugly brownish and blue?? Is there a way to fix it?

here is what i used. -

Code: [ Select ]
<a href="link2.html" onMouseOver="document.getElementById('link2').innerHTML='Home1'" onMouseOut="document.getElementById('link2').innerHTML='Wicked'"><span id="link2">Wicked</span></a></div></td>



and-
Code: [ Select ]
A:link    {
color:#663399;
font-size:12pt;
font-family:Papyrus;
font-style:italic;
text-decoration:none;
    }
A:hover    {
color:#9999CC;
font-size:8pt;
font-family:Papyrus;
font-style:normal;
text-decoration:none;
    }
A:active    {
color:#9999CC;
font-size:8pt;
font-family:Papyrus;
font-style:normal;
text-decoration:none;
    }
A:visited    {
color:#9999CC;
font-size:9pt;
font-family:Papyrus;
font-style:italic;
text-decoration:none;
    }
  1. A:link    {
  2. color:#663399;
  3. font-size:12pt;
  4. font-family:Papyrus;
  5. font-style:italic;
  6. text-decoration:none;
  7.     }
  8. A:hover    {
  9. color:#9999CC;
  10. font-size:8pt;
  11. font-family:Papyrus;
  12. font-style:normal;
  13. text-decoration:none;
  14.     }
  15. A:active    {
  16. color:#9999CC;
  17. font-size:8pt;
  18. font-family:Papyrus;
  19. font-style:normal;
  20. text-decoration:none;
  21.     }
  22. A:visited    {
  23. color:#9999CC;
  24. font-size:9pt;
  25. font-family:Papyrus;
  26. font-style:italic;
  27. text-decoration:none;
  28.     }
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

This is going to get pretty lengthy for you 'A' tag, but I am sure RichB could put it into a function for you (I think you just have to go:

Code: [ Select ]
<script>
function hoverOver(){
//all the onMouseOver stuff here
}
function hoverOut(){
//all the onMouseOut stuff here
}
</script>

<!--then call it with--->
<a onMouseOver="hoverOver();" onMouseOut="hoverOut();"><span>Link</span></a>
  1. <script>
  2. function hoverOver(){
  3. //all the onMouseOver stuff here
  4. }
  5. function hoverOut(){
  6. //all the onMouseOut stuff here
  7. }
  8. </script>
  9. <!--then call it with--->
  10. <a onMouseOver="hoverOver();" onMouseOut="hoverOut();"><span>Link</span></a>


But what you want to do is add this to the onMouseOver:

Code: [ Select ]
onMouseOver="document.getElementById('link2').innerHTML='Home1'; document.getElementByID('link2').style='color:#9999CC; font size:9pt; font-family:Papyrus; font-style:italic; text-decoration:none;';"


Then do something similar for the onMouseOut. That should change the current style when the mouse is over the link...I'm just not sure if it will go back when the mouse goes out, or stay so you'de have to experiment with that.
  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

Ok I am not very good with this and I don't think i udnerstand what you mean :( But thank you very much for trying. Maybe I will just let it go and try something else, or just keep it all the same color and just change the words. Thank you ;)
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

try ignoring my spiel on functions, and just replace the onMouseOver stuff...does that work?
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I liked b_heyer's function idea, so I tried to extend it a little. Instead of adding all the style information onmouseover I used two different classes of links and took advantage of javascript's ability to dynamically change the className property of an element. I'm not exactly certain what effects you want so you will probably want to edit the style portion. I left the values for the onmouseover class (linkOut) blank and you can fill them in and of course you can change the others to whatever you want. If I understand your problem this should work as it give you two entirely different classes to define.

Code: [ Select ]
<html>
<head>
<style type="text/css">
<!--
/* define the class to show when the mouse is not over below here */
A.linkOut {
color:#663399;
font-size:12pt;
font-family:Papyrus;
font-style:italic;
text-decoration:none;
}
A.linkOut:visited {
color:#9999CC;
font-size:12pt;
font-family:Papyrus;
font-style:italic;
text-decoration:none
}

/*define the class to show when the mouse is over below here*/
A.linkOver {
color:#9999CC;
font-size:8pt;
font-family:Papyrus;
font-style:normal;
text-decoration:none;
}
A.linkOver:active {
color:#9999CC;
font-size:8pt;
font-family:Papyrus;
font-style:normal;
text-decoration:none;
}
A.linkOver:visited{

}
//-->
</style>

<script type="text/javascript">
<!--
function hoverOver(link,overText){
link.className="linkOver";
link.innerHTML=overText;
}
function hoverOut(link,outText){
link.className="linkOut";
link.innerHTML=outText;
}
//-->
</script>

</head>
<body>

<a class="linkOut" href="link2.html" onMouseOver="hoverOver(this,'Home1')" onMouseOut="hoverOut(this,'Wicked')">Wicked</a>
</body>
</html>
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. <!--
  5. /* define the class to show when the mouse is not over below here */
  6. A.linkOut {
  7. color:#663399;
  8. font-size:12pt;
  9. font-family:Papyrus;
  10. font-style:italic;
  11. text-decoration:none;
  12. }
  13. A.linkOut:visited {
  14. color:#9999CC;
  15. font-size:12pt;
  16. font-family:Papyrus;
  17. font-style:italic;
  18. text-decoration:none
  19. }
  20. /*define the class to show when the mouse is over below here*/
  21. A.linkOver {
  22. color:#9999CC;
  23. font-size:8pt;
  24. font-family:Papyrus;
  25. font-style:normal;
  26. text-decoration:none;
  27. }
  28. A.linkOver:active {
  29. color:#9999CC;
  30. font-size:8pt;
  31. font-family:Papyrus;
  32. font-style:normal;
  33. text-decoration:none;
  34. }
  35. A.linkOver:visited{
  36. }
  37. //-->
  38. </style>
  39. <script type="text/javascript">
  40. <!--
  41. function hoverOver(link,overText){
  42. link.className="linkOver";
  43. link.innerHTML=overText;
  44. }
  45. function hoverOut(link,outText){
  46. link.className="linkOut";
  47. link.innerHTML=outText;
  48. }
  49. //-->
  50. </script>
  51. </head>
  52. <body>
  53. <a class="linkOut" href="link2.html" onMouseOver="hoverOver(this,'Home1')" onMouseOut="hoverOut(this,'Wicked')">Wicked</a>
  54. </body>
  55. </html>


You can add more links just by filling in the new text values:

Code: [ Select ]
<a class="linkOut" href="whatever.html" onMouseOver="hoverOver(this,'hover text here')" onMouseOut="hoverOut(this,'non-hover text here')">non-hover text here</a>
  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

You guys are the best ;) Thank you thank you so much ;) I was about to give up it was annoying me so much lol ;) It works perfectly now. It was working with b_heyer's, by not chanign color but it would stay saying home instead of wicked. But this it goes back. ;)

So thank you everyone so much ;) :thumbsup:
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I forgot to mention that if your links are in a table (and it looked like they were because I spotted an </td> in your code post) then you can add some additional stuff to make them look like buttons. This will also make the mouseover a little bit smoother when the text changes size. I noticed that the cursor gets a little hinky when the change to the smaller text takes place.

for example you could add:
Code: [ Select ]
display:block;
line-height:30px;
width:100px;
background-color: beige;
text-align: center;
  1. display:block;
  2. line-height:30px;
  3. width:100px;
  4. background-color: beige;
  5. text-align: center;

to all your classes

To see what this would look like try clicking here to see it in action. I think this will only work with links in a table like in this sample page.

// edit
you can also add onfocus="blur()" to the a tags to get rid of the line that appears around the links when you click them. View the source code of the sample page to see the modified code. Another thing that I forgot - it's a good thing my head is screwed on.
  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

ooo thank you :) that looks alot better using that ;) Where exactly would I put the onfocus="blur()" part at though?
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Anywhere inside the a tag for each of the links:

Code: [ Select ]
<a class="linkOut" href="link2.html" onfocus="blur()" onMouseOver="hoverOver(this,'Home1')" onMouseOut="hoverOut(this,'Wicked')">Wicked</a>
  • lilstorm
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: New York

Post 3+ Months Ago

ohhh lol ;) Thank you so so much. Its very sweet of you :)
  • mekiara
  • Born
  • Born
  • mekiara
  • Posts: 1

Post 3+ Months Ago

Im looking for a mouseover that has the text fade color if anyone knows one letme know

Post Information

  • Total Posts in this topic: 19 posts
  • Users browsing this forum: No registered users and 49 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.