Forum Moderators: not2easy

Message Too Old, No Replies

Replacing part of an Image on hover

         

mikara08

8:58 pm on Nov 11, 2009 (gmt 0)

10+ Year Member



Okay, so I'm making a website for an school project. I have experience with HTML, CSS, and some PHP, but I PHP isn't allowed on the free site we're using for this.

Now that you know how limited my abilities are, I hope this is in the right area. The site is
<snip>
As you see, we have a picture of Operation Man with the digestive system in him. What I would like to do is, when my mouse hovers over an organ, a new image shows up just over that organ (I want them to glow when the mouse is hovering over them). Is there any way to do this with CSS or HTML? If PHP could help, I do have another paid server I could put the site on as well. I thought about using an image map to make the links in the right spots, but that still doesn't help me with making a new image appear. Thank you in advance for your help!

[edited by: swa66 at 9:19 pm (utc) on Nov. 11, 2009]
[edit reason] link weeding, please see ToS and Forum Charter [/edit]

D_Blackwell

9:23 pm on Nov 11, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome mikara08. The personal link is going to get chopped, so I cannot use it as a reference.

What you describe should be possible with HTML and CSS. PHP would only be necessary if you wanted other actions to take place at the same time.

Image map is probably the best description. What you will want to do is absolutely position your "...a new image shows up..." and set {display: none;}. Then have it {display: block;} on :hover.

There are a number of markup options. Just start playing around with something simple. When you get a grasp of how it works, markup the actual page. If you have trouble, post the relevant HTML/CSS and we will see what is happening.

Start with something small - one sample. Similar to a and a:hover, but done without the links - classes and spans.

Search - css image maps - for lots of resources and ideas.

Be sure to declare a DTD and validate the markup. That will avoid, eliminate, or rule out many problems.