2 years ago, I have posted my code and right now I am still working on a new feature.
I have posted my question on several german forums, but it seems nobody knows a solution.
<IMG name=moni2 src="http://www.fotos-hochladen.net/uploads/bild1g8cdhrtwkj.jpg" height=210>
<IMG class=pixx onMouseOver="moni2.src='http://www.fotos-hochladen.net/uploads/bild1g8cdhrtwkj.jpg';"
src="http://www.fotos-hochladen.net/uploads/bild1g8cdhrtwkj.jpg" width=60 height=45>
<IMG class=pixx onMouseOver="moni2.src='http://www.fotos-hochladen.net/uploads/bild2zmnoj03as1.jpg';"
src="http://www.fotos-hochladen.net/uploads/bild2zmnoj03as1.jpg" width=60 height=45>
<IMG class=pixx onMouseOver="moni2.src='http://www.fotos-hochladen.net/uploads/bild3l3r4psgymo.jpg';"
src="http://www.fotos-hochladen.net/uploads/bild3l3r4psgymo.jpg" width=60 height=45>
Please save this code in an editor ans save it as test.html > then open in a web browser
I love this code because,
- change on the big image when mouseover a small image
- no mouseout
- root picture can be added (visible when no mouseover has been made)
Now, I need to add a URL on the big picture.
The big challenge is:
When image number 1 is shown, there must be URL number 1 on the big image,
When image number 2 is shown, there must be URL number 2 on the big image.
According to my friend, this URL challenge/problem cannot be solved with CSS.
According to members in the german forums, this should be possible. Unfortunately they don't help me.
The reason why I would like to change the code (to add image-dependent URLs on the big image) I need to change the code for touch screens in order to work.
I hope for your professional help.
Thank you in advance.
P.S. If you need to know the full website for a better understanding, please visit http://tinyurl.com/bvrrgsj with an touch screen device (e.g. iPad) and on desktop. You will see the difference when mouseover/click on the small images