PDA

View Full Version : Mouseover text to display image in a frame and keep hyperlink intact!



PavPev
07-13-2011, 07:53 PM
Hello there,

Let me just start by saying that I'm a complete amateur and and have never designed a full website before, nevertheless I volunteered myself to design the website for my boss's company and have been using Frontpage (that's all he had!) You can take a look at it so far at www.architect-uk.com

Also I'm not great with HTML code and have been designing on a WYSIWYG basis which I know isn't the proper way...if you view the website in Chrome that'll be quite evident. This is an issue I'm probably looking to address in the long term, i.e. learn proper coding first.

What I am looking for is a way to roll over the names of projects on our profile page (http://architect-uk.com/portfolio.htm) and have an image of the project show in the frame above 'Private Residential Projects' where there is currently just a fixed image. I had achieved this before by using some java script I found on here! (http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm).

Worked a charm at first, but the problem is that the large image path occupies the href attribute, so I can't assign a hyperlink to the project page itself, meaning if you click on the text, it just shows the image it is referencing into the above frame.

Does anyone have a way around this? or some alternative cleverer coding? I've been trawling forums for a few days and haven't found quite the right thing yet :confused:

Any help would be appreciated, and apologies for my un-technical language!

Pav

jscheuer1
07-14-2011, 03:33 AM
Use this modified version of the script:

3977

And now, instead of using the href attribute, it will use the data-image attribute. So if before you had like:


<a href="sofagirllarge.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="Nothing better than relaxing on the sofa sometimes">
<img border="0" src="sofagirl.jpg" width="91" height="61">
</a>

Now do it like so:


<a href="thereallink.htm" data-image="sofagirllarge.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="Nothing better than relaxing on the sofa sometimes">
<img border="0" src="sofagirl.jpg" width="91" height="61">
</a>

PavPev
07-14-2011, 08:31 AM
You make it sound so easy...guess it is when you know how! :p
Exactly what I needed, works a charm! Thanks John!!!