Results 1 to 3 of 3

Thread: Mouseover text to display image in a frame and keep hyperlink intact!

  1. #1
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Mouseover text to display image in a frame and keep hyperlink intact!

    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/dynamici...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

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

    Pav

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Use this modified version of the script:

    Attachment 3977

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

    Code:
    <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:

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You make it sound so easy...guess it is when you know how!
    Exactly what I needed, works a charm! Thanks John!!!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •