Basic Javascript Q
- Started
- Last post
- 19 Responses
- Dancer
I have a pseudo text link that when you roll over it an image changes, using something basic like this: http://www.htmlite.com/faq011.ph…
– Fine.But Now I want it so when you roll over the image it swaps as well as changing the state of the text to :hover.
Any idea how I get both to work in the same way no matter where you roll over (text/image)?
Thanks
- neverblink0
make a function, which you call on both the hopver of the image and of the text.. inside the function do the actual swapping.
- Dancer0
I fogot to add that I have no idea about syntax or writing JS :)
- neverblink0
give me a sec.
- rafalski0
<a id="linky" href="" onMouseOver="document.MyImage.src='image2.gif';" onMouseOut="document.MyImage.src='image1.gif';"> blah</a>
<img id="MyImage" src="http://www.jodybarton.co.uk/JodyBarton/Typography/blah-blah-blah.jpg" onMouseOver="document.getElementById('linky').classname='onState'" onMouseOut="document.getElementById('linky').classname='offState'" />
then define .onState and .offState in CSS alongside :link and :hover
needs to be tested though :)
- neverblink0
btw. with the pseudo text-link, you mean you're not using an 'a'-element? But some other text-holding element (p, span, etc.)?
- neverblink0
why not just use a:hover ?
- neverblink0
no you can't as :hover us simply a sub-selector within css.
i'd set it up like this: http://pastebin.com/d2159484d
and then use css to do the design
- Dancer0
So what you have done is put the image and text within the same link. Correct?
It sort of works but not fully....
I can email you the source files if you like ;)
- And thanks very much BTWDancer
- send m.. or test Dancers code.. that should work as wellneverblink
- rafalski0
have you tried mine Dancer?
- Dancer0
Yeah yours does not work quite right either raf.
2 things that does not seem right:
1) the blah changes when you roll over the image but the image does not change when you roll over the blah (know what I mean)
2) no hand appears when going over the imageI can post the source files if you like?
- having said that I may be able to fix it with what you have posted ;)
ThanksDancer
- having said that I may be able to fix it with what you have posted ;)
- rafalski0
The pastebin version is an updated one, works locally here, IE6-7 and FF. You can add cursor:pointer to image style if needed.
- Dancer0
your right it does work... but not in Safari... :(
Thanks for your help raf
- rafalski0
Haha but it was your part of code not working :)
http://pastebin.com/m4069e118- ahhhhh thanks raf.... now I have 2 solutions to play with... cheers mangDancer
- neverblink0
*ouch*
- rafalski0
onClick?