CSS help
- Started
- Last post
- 8 Responses
- ganon
i am familiar with the whole link : visted : hover : active CSS capabilities, but i want to change the actual text on "hover"...say you have a link called "contact" and then when you hover it changes to "our company"..,i have looked through many online references, but no luck...can it be done and how!?.thanks....
- unknown0
No. Since CSS stands for Cascading Style Sheets and is intended for stylizing the content changing it. You will have to do some JavaScripting my friend.
- ganon0
thanks boz, makes sense...do i have to use images, or can it be done with html text?..if so, do you have any pointers to a tutorial?..thanks....
- sp0
You can use DOM for this, also...just to let you know.
- ganon0
can anybody point to a tutorial or help me out, i am searching around trying to figure out how to do this....
- kpl0
flip answer: use flash.
more helpful answer:
I won't tell everything, but here's some code, some instructions, and you can figure the rest out. I'll assume you know basic JS and CSS.
These lines will hide a span or a div using JS and DOM:
var obj;
obj = document.getElementById('xxx');
obj.style.visibility = "hidden";replace xxx with the id of the element you're targetting.
next, set two span tags next to each other. set one as over, the other as out. out would contain "contact", over contains "the office." set the over span's visibility to hidden in css. make the text in each span links. for the out one, don't put in a href (or set it to "#" or something) but make it hide itself and show the other div on mouse over. for the a tag on the other span, set mouseout to hide over and show the out span. and set the href to a proper page.
see if that works. if not, well, experiment around with this set up. good luck.
- ganon0
thanks a lot kpl, i will work on it and let you know....
KPL for PRESIDENT
- kpl0
few more things:
when I say "set one span tag as", I mean, name that span tag with the id attribute.
second, I tested this setup on my machine and it works...save one thing. when a span is hidden, the space taken up by the span is not released... ie there will be a block of whitespace where that span would had been. so, the effect won't be as you wanted...
you might want to use div's instead of span's. when one is hidden, also change it's position to absolute (and conversely when showing one change the position back to normal). the problem here is you cannot put the link in line...it's its own separate line.
and of course, to make one div/span visible, set it to visible, not hidden.
- CAJTBr0
i once did a big site with a nav something like this. for each link i had 3 divs. each div was positioned absolute, the top div contained a transparent gif and had a z-index of 3, the second contained the regular text, was set to visible as default and had a z-index of 2, the third contained the mouseover text and had a z-index of 1.
so the animated gif was the actual link, and in that you have something like onMouseOver="show('whatever'); return true" onMouseOut="hide('whatever');...
and then stick in a function show which hides the normal layer and shows the mouseover layer, and hide which does the opposite.
the advantage of this is that you can choose how big your hit area is with the gif; you don't have to bother including visited, active, hover states as the text isn't an actual link; you can put all the code into the gif href, rather than splitting it over two links.