Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Floating Images while preserving underlining links

    Hello,

    I got a unique problem here and hope you guys can help me out.

    I have a bunch of images on my website that are linked. I need to overlay my image on top. Kinda of like watermark.

    I don't have the time or resources to do this in image editing. It must be done on the server. I am using absolute positioning. The problem I have is I can use Z-Index but I need the area that I am covering to remain clickable. Understand?'

    Image 1: links to google.com
    My overlay image (logo, warning, etc) sits on top of Image 1, small section but does not block the clickabilty of image1. I don't want to copy the links either each time.

    Is this possible? I tried playing with invisible divs, divs with backgrounds, etc but couldn't figure it out.

    If you want I can make 1 picture in photoshop of what its supposed to look likes.

    thanks for help

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    What about making a hotspot? Dreamweaver has that option.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Isn't hotspot image map?

    I want my image to be on top of the other other image while still allowing the user to click on the link below.

    Sorry I don't follow the hotspot thing?

  • #4
    New Coder
    Join Date
    Feb 2009
    Location
    Texas
    Posts
    56
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Putting a watermark above the image, and not on the actual image, will only prevent the PrtSc approach, if they can right click and download the image, there will be no watermark on it.

    But, I will give it a shot anyway.
    The only thing I can think of is to have the watermark div the same link as the picture.
    Free PSD to XHTML/CSS conversion - Dimby.net
    Which doctype should I use?

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Camron467 View Post
    Putting a watermark above the image, and not on the actual image, will only prevent the PrtSc approach, if they can right click and download the image, there will be no watermark on it.
    Yeah the watermark is really more of a disclaimer kinda thing rather than a real security issue.

    But, I will give it a shot anyway.
    The only thing I can think of is to have the watermark div the same link as the picture.
    Yeah but I would rather not do this if possible. To expand this further, I'd not only like to overlay my image on other images but also iframes from remote hosts where I can't modify the page.

  • #6
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    giving us a link to ur site along with source code may help us further.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #7
    New Coder
    Join Date
    Mar 2009
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hey pitbull.

    I don't have a site. I want to build a mashup site and some of the content may not be suitable to certain audiences. I was thinking to overlay an image like a warning before they click through. Know what I mean? I want to overlay over images & text links. I want them to still be able to click the link but at least my warning is on top.

    You Understand?

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I do kind of see what you're getting at--you don't want to "protect" the image, as it were, do you?

    Anyway, from what I gathered, you want to overlay an image on top of an existing one whilst allowing linking. I've mocked up some code for you so you can have a look, where the "Cyan Light Industries" could be anything you want. Is that what you wanted?

  • #9
    New Coder
    Join Date
    Mar 2009
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by CyanLight View Post
    I do kind of see what you're getting at--you don't want to "protect" the image, as it were, do you?

    Anyway, from what I gathered, you want to overlay an image on top of an existing one whilst allowing linking. I've mocked up some code for you so you can have a look, where the "Cyan Light Industries" could be anything you want. Is that what you wanted?
    Hi CyanLight

    Thanks for your help. That Looks like what I want but...I see in the source you are making the link the same for both the watermark and the album image. For items on my site that I have control over I suppose it would work but when I frame another site it's a different story. That why I say I don't want to have my image a link but like a "pass-thru". Maybe it's not possible?

    I thought with layers it could be possible but my css skills is not strong.

    I attached an image where i took a screen capture of your post with hyperlink. As you can see in my test image I have a red box with Warning inside blocking part of the link. I want user to be able to click the link even the occluded parts of the link behind the warning label. So when their mouse is to the left side of the warning box their mouse changes to a finger indicating a link is behind this. Can this be possible?
    Attached Thumbnails Attached Thumbnails Floating Images while preserving underlining links-testimage.jpg  

  • #10
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by robertov View Post
    Isn't hotspot image map?

    I want my image to be on top of the other other image while still allowing the user to click on the link below.

    Sorry I don't follow the hotspot thing?
    have your image positioned and then just use the coordinates to test for the user clicking.

    The user link image is xwide and yheight and it's at xx and yy

    you position you image wherever, and if they're over your image and within the parameters of the link image, they can click.

    make a test for the mouse position (pageX pageY or clientX clinetY or something..google) and then see if they're inside the bounds when they click.

  • #11
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    As far as I know, without some JavaScripting, I don't think so. It would be really easy to put a little warning symbol next to the link, via CSS, though, which may be a satisfactory compromise.

  • #12
    New Coder
    Join Date
    Mar 2009
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks guys for your help. I'll look into a javascript and the screen xy thing.

    Yeah having the warning next to the link could work as a compromise but ideally I'd like to get the big lebowski.

    OK. Very good & thanks guys for your contributions. It looks like I have to investigate javascrripts.

    Cheers

  • #13
    New Coder
    Join Date
    Mar 2009
    Location
    Texas
    Posts
    13
    Thanks
    3
    Thanked 1 Time in 1 Post
    robertov,

    It seems you need some !imporant CSS code to parse the framed pages. If you aren't actually in control of the HTML anchor tag, it's difficult for you to manipulate it.

    I have a crazy idea that I haven't tested or tried. Why not have style coding in your header, with just the anchor handle manipulation?

    PHP Code:
    <style>
    {
      
    displayblock;
      
    backgroundurl("warning.png"top center no-repeat;
      
    height20px// height of your image
      
    margin:0padding:0;
      
    text-decorationnone;
    }

    a:hover {backgroundnonetext-decoration:underline;}
    </
    style
    Maybe somebody more versed in CSS can explain what I'm trying to accomplish here. Again, it's hard to do if you aren't actually writing the HTML on the framed page.

  • #14
    New Coder
    Join Date
    Mar 2009
    Posts
    18
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Red Matrix,

    That could be interesting. Last night I did more researching and read that our stylesheet would not propogate down to iframed page on other domain.
    So if they define a, a:hover attributes, whatever is in the header of ours wouldn't reflect.

    I did try to do this but it didn't work for me unless I need to research another angle here cause that would be cool to style my iframed pages.

  • #15
    New Coder
    Join Date
    Mar 2009
    Location
    Texas
    Posts
    13
    Thanks
    3
    Thanked 1 Time in 1 Post
    I think it would be cool if you could "parse" the contents of a page before framing it. This way, you could "escape" some things, if you knew what to look for. Or at least find the </head> tag and prepend your style sheet link, lol.

    I'm pretty sure there's a way, but I'm just an amateur.

    Dave


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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