Discussion:
mouseover help
(too old to reply)
super70s
2023-05-20 04:20:57 UTC
Permalink
I thought it would be cool to do a mouseover on the old "Faces - Ooh La
La" album cover so when the mouseover happens it emulates the actual
album cover. I was successful in setting up the pic at the top, but
since it probably wouldn't be obvious to the user, I'd like to be able
to make the text in the body that says "maneuvered so the eyes and mouth
moved" do the emulation when the user clicks that. Can't quite figure
out how to make that happen.

Hope I've explained myself clearly, I appreciate any help.

https://www.superseventies.com/ac17oohlala.html
Apd
2023-05-20 12:21:38 UTC
Permalink
Post by super70s
I thought it would be cool to do a mouseover on the old "Faces - Ooh La
La" album cover so when the mouseover happens it emulates the actual
album cover. I was successful in setting up the pic at the top, but
since it probably wouldn't be obvious to the user, I'd like to be able
to make the text in the body that says "maneuvered so the eyes and mouth
moved" do the emulation when the user clicks that. Can't quite figure
out how to make that happen.
Hope I've explained myself clearly, I appreciate any help.
https://www.superseventies.com/ac17oohlala.html
Firstly, your image width contains a misplaced quote before "width=".

Here's one way. Give your img tag an id and put a span around the word
to be clicked with a suitable event handler like so:

<img id="ac" ... >

<span onclick="document.getElementById('ac').src='img2.gif'">maneuvered</span>

You could also have an onmouseout to reset it. You probably want to
indicate the word is clickable by, say, changing the mouse pointer in
the span:

style="cursor:pointer"
super70s
2023-05-20 16:31:59 UTC
Permalink
Post by Apd
Post by super70s
I thought it would be cool to do a mouseover on the old "Faces - Ooh La
La" album cover so when the mouseover happens it emulates the actual
album cover. I was successful in setting up the pic at the top, but
since it probably wouldn't be obvious to the user, I'd like to be able
to make the text in the body that says "maneuvered so the eyes and mouth
moved" do the emulation when the user clicks that. Can't quite figure
out how to make that happen.
Hope I've explained myself clearly, I appreciate any help.
https://www.superseventies.com/ac17oohlala.html
Firstly, your image width contains a misplaced quote before "width=".
Here's one way. Give your img tag an id and put a span around the word
<img id="ac" ... >
<span
onclick="document.getElementById('ac').src='img2.gif'">maneuvered</span>
You could also have an onmouseout to reset it. You probably want to
indicate the word is clickable by, say, changing the mouse pointer in
style="cursor:pointer"
I have it working exactly like I wanted, way cool!

I also put simple <u></u> tags outside mouseover code in the text to
make it obvious to the user.

Many thanks for your help friend.

Loading...