...

View Full Version : Floating Images while preserving underlining links



robertov
03-06-2009, 06:08 PM
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

PitbullMean
03-07-2009, 12:17 AM
What about making a hotspot? Dreamweaver has that option.

robertov
03-07-2009, 12:22 AM
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?

Camron467
03-07-2009, 12:24 AM
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.

robertov
03-07-2009, 12:28 AM
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.

PitbullMean
03-07-2009, 12:34 AM
giving us a link to ur site along with source code may help us further.

robertov
03-07-2009, 12:43 AM
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?

Apostropartheid
03-07-2009, 12:46 AM
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 (http://cyan-light.co.uk/cf/robertov/) for you so you can have a look, where the "Cyan Light Industries" could be anything you want. Is that what you wanted?

robertov
03-07-2009, 01:28 AM
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 (http://cyan-light.co.uk/cf/robertov/) 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?

TinyScript
03-07-2009, 01:43 AM
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.

Apostropartheid
03-07-2009, 01:54 AM
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.

robertov
03-07-2009, 05:51 AM
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

RedMatrix
03-07-2009, 11:13 AM
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?



<style>
a {
display: block;
background: url("warning.png") top center no-repeat;
height: 20px; // height of your image
margin:0; padding:0;
text-decoration: none;
}

a:hover {background: none; text-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.

robertov
03-07-2009, 01:32 PM
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.

RedMatrix
03-07-2009, 08:11 PM
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

Fisher
03-08-2009, 07:14 AM
Are you looking for something like this? Everything would be clickable except your watermark:

watermark test on iframe (http://mytestingsite.info/watermark.html)

The iframe is usable, but currently I don't have the picture clickable. It is covered in a transparent png file completely

robertov
03-08-2009, 06:12 PM
Hey thanks for your help.

I was hoping that the watermark would be more passthru and even when the mouse is over the watermark the user can click on the image behind it.

I guess this is not possible so I may have to go with what you demonstrated and other have.

Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum