1

My situation is a bit tricky and hard to explain, hopefully I can do this clearly.

On my website I need it so you click on something and it downloads an image, but the object you click on must allow the :hover psuedo class to change the image on :hover.

How I've set it up is as follows:

http://jsfiddle.net/6NuTv/

If you remove visibility:hidden from the HTML, the image appears and the browsers' download function becomes available. I can choose which image the img src= is, but adding visibilty:hidden will disable the download ability.

To reiterate - I need it so you you hover over prof_wl_btn and it downloads the <a>'s href=... image and on hover/mouseover prof_wl_btn changes it's background position (so far using psuedo class).

Possible Methods

1: Use javascript onMouseover and Z-Index, but I can't get z-index to work here...

2: I tried using the CSS attribute clip:rect(Xpx,Xpx,Xpx,Xpx); but that crops everything.

If this is unclear I'm sorry, this is hard to explain! I can't find any other post like this.

Ghost Echo
  • 1,997
  • 4
  • 31
  • 46
  • so you just want hoverable images that when clicked download the image? – twinlakes Aug 19 '13 at 18:22
  • I think so, but there's odd stipulations how the site is set up. – Ghost Echo Aug 19 '13 at 18:23
  • what do you mean by odd stipulations? – twinlakes Aug 19 '13 at 18:24
  • also what is your backend language? – twinlakes Aug 19 '13 at 18:24
  • There are many stipulations, but this boils down the essential problem. There is no back end language, this is going to be a local- only site. – Ghost Echo Aug 19 '13 at 18:26
  • I just need it so adding `visibility:hidden` doesn't disable the download function. – Ghost Echo Aug 19 '13 at 18:27
  • What does the user see if the link is invisible (and how do they know to click/hover it)? In any case I'm thinking covering the anchor up with whatever they see, then use pointer-events to allow events to reach the anchor itself. – stommepoes Aug 19 '13 at 18:33
  • I'm confused. You want the download function to kick off automatically on hover? Or you want the user to be able to right-click and download an image that does not appear? – andi Aug 19 '13 at 18:34
  • @andi I think I misunderstood the OP: the user must first click to download the image, and the image must appear somewhere... meanwhile, now that the image is there, :hovering over the original link changes the image. I think. – stommepoes Aug 19 '13 at 18:35
  • @andi - I want it so the user clicks on the image (the image will say something like 'Click To Download Image') and it is treated like 'Save As'. If you check out my fiddle and remove the 2 `Visibility:Hidden`'s from the HTML the download function will work. – Ghost Echo Aug 19 '13 at 18:36
  • So why the visibility:hidden? There is indeed an image the user sees, right? Meantwhile, here's a link to Lea's mention of pointer-events: http://lea.verou.me/2011/03/custom-select-drop-downs-with-css3/ (she demonstrated in a talk clicking on a link under an image) – stommepoes Aug 19 '13 at 18:38
  • @stommepoes, yes I think that's right. 1-User hovers over image and image changes (like CSS bg-position 100px 0px, etc) 2. User click on 'highlighted' image and on Click it Downloads the image (or the ` – Ghost Echo Aug 19 '13 at 18:38
  • I need visibility hidden because I can't put the CSS psuedo class on the . Therefor to get the hover I have to put it on a different
    .
     – Ghost Echo Aug 19 '13 at 18:39
  • Ah, you want something else! Post exactly what you want to happen and I can probably answer it correctly! Forget the visibility stuff for now. – stommepoes Aug 19 '13 at 18:42
  • @stommepoes - I want it so 1:User hover overs image or button, probably a `
    `. On hover the image changes (like bg-position shift, etc) 3. Also on hover - clicking the `
    ` you hovered over will automatically download an image.
     – Ghost Echo Aug 19 '13 at 18:45

2 Answers2

1

Ok rewrite, since OP clarified in comments.

You can either have a background image that shifts on :hover, or if the image must be in the HTML then you can indeed move it on :hover of its parent, but if you wanted alt text to always show that won't happen here.

<a href="downloadlink"><img src="someiImg" alt="Download ze image, yes"></a>

Make one large image (someImg) showing both states (normal/hover). They can be top bottom or side-to-side. I like top-bottom. Let's say the image you want to show is w 40px by h 40px. Your new sprite image showing both states, if top-bottom, will be w 40px by h 80px;

  • Set the anchor to block context (display: block, float, whatever).
  • Set height and width on teh anchor equal to the amount of image you want the viewer to see (so in this case, width and height of the anchor is 40px).
  • Set anchor to overflow hidden. Now you should only see the 40 x 40 part of the image you want users to see before they do anything.

You can now either set the anchor to position:relative and the img to position: absolute, OR leave them and use negative margins (you'll have to make the img also in block context to do this). Let's say you do the latter:

a img { display: block; }

a:hover img, a:focus img { margin-top: -40px; }

Because the anchor has overflow hidden, you'll still only see a 40 x 40 window of the image, but now you see the bottom part. As a bonus you get keyboard working there too.

If you want to use positioning, you'd relative-position the anchor, absolute-position the img, set the image in normal state to top: 0 and left: 0, and on hover/focus of the image set top: -40px;

stommepoes
  • 150
  • 6
  • I need it so when you click on the image on it downloads another image. Also when you hover over the image, the image bg changes. If I didn't have to put in the pseudo, this all works. But I don't think I can put a psuedo class on an inline HTML `` element that contains a download attribute. – Ghost Echo Aug 19 '13 at 18:59
  • I'm going to read this very carefully then get back to you. Thanks in advance for the assistance! – Ghost Echo Aug 19 '13 at 19:04
  • Yes, the image the user clicks on would be different than the one they actually download. It would be like the accepted answer here http://stackoverflow.com/questions/2408146/href-image-link-download-on-click, but it needs to have a hover function (when they hover the image changes/glows/color shifts,etc) – Ghost Echo Aug 19 '13 at 19:11
  • That's why I've added visibility:hidden, to hide the `` img that shows up. This way I can wrap a
    using CSS3:hover to shift the bg position. But adding visibility:hidden disables the `download` on click function...
     – Ghost Echo Aug 19 '13 at 19:14
  • 1
    But I don't understand why hide the anchor? Why can't you put the correct image you want inside it? It does not have to match the downloadable thing (which could be a pdf, an image, a whatever). – stommepoes Aug 19 '13 at 19:28
  • I put the background image in the a, and the bg shift on the a:hover. I also removed the entire inline call. I based my code from http://stackoverflow.com/questions/2408146/href-image-link-download-on-click and didn't quite understand what was going on there. Thanks so much for you help, very informative. Cheers! – Ghost Echo Aug 19 '13 at 19:38
  • http://stommepoes.nl/downloadtest.html This shows one image, downloads another. Not what you're going for? – stommepoes Aug 19 '13 at 19:38
  • Didn't know if your shown image could be a background, that is much simpler than an HTML img, but both work (plus HTML image gives you alt text). Glad it works now. – stommepoes Aug 19 '13 at 19:39
  • Yep, that's is pretty much how I want it. I was using an inline as the bg example which meant I had to wrap that in a
    to have the bg-shift. I got it working now. The whole download attribute was new to me. Thanks again. Btw, cool download images :-)
     – Ghost Echo Aug 19 '13 at 19:45
0

I'm still not totally sure what you mean, but i think you're trying to do this

a img {visibility: hidden;}
a:hover img {visibility: visible;}

but I think the best way would be to set the background image of the link to be the image, then change the background image on hover.

twinlakes
  • 9,438
  • 6
  • 31
  • 42