Image widget with rollover and hyperlink

So silly of me. This works:

.hyper-image a {
	display: block;
	width: 100%;
	height: 100%;
}

Of course, if there’s any problem with this approach, please let me know.

Thanks again.

Hi

Since you are developing something really simple I think that’s the best approach, and yes the CSS you applied to the “a” is what you needed. The only “bad point” of that is that it restrict the image size, since they won’t “adapt”. But as you said you’ll be adding more options and features as you learn.

Well done Garfield! good luck with the code.

Hi,

Thanks, i’m getting there. Yes, i’ve since removed the width rule and it seems to resize, but I haven’t tried it with a proper image though so it probably stretches. Also, I realise I don’t have any link text which is a bit of a no-no incase styles are turned off. I’ve added that and used text-indent to hide if off the screen.

All well and good, but ideally, i’d like the user to be able to set the background image through the widget itself rather than having to change the image in the folder. I can do that the same way as i’m getting the link on the form and show it, but then the hover in the css doesn’t work. Is there any way to instead pass the value entered in the form to the background property in the css styles?

Thanks

Ok got it.. try adding the background in the anchor tag, like this:

echo '<a href=' . $name . ' style="background:'. $image_url .';"></a>';

Let me know how it goes.

Getting closer, I had to add in the url() part of the background rule, so (have renamed name to better reflect what it is):

echo '<a href=' . $link_url . ' style="background:url(' . $image_url . ') top left no-repeat;"></a>';

That successfully applies the background and hover still works but doesn’t offset the background. I know hover works because I had added in some opacity rules (A second option incase I couldn’t get the image rollover to work the way I wanted) and these still work – ie. the opacity of the element changes on hover – but not quite as they did before.

When the hover occurs and the image changes to 50% opacity, The corners of the image are seen outside the rounded border of the widget. I’m using border-radius in my theme’s stylesheet so my sidebar widgets have rounded corners. There was already a bit of bleed before these latest changes so i’ve been using background-clip in my theme’s stylesheet to fix that, but this isn’t bleed, it’s like using the background without rounded corners at all.

To try to get the image rollover to work, I thought maybe I had the hover on the wrong element (the widget itself) so I used .hyper-image a { in my styles, but this makes no difference. My inline stylesheet in the widget is currently:

add_action('wp_head', 'hyper_image_head');

function hyper_image_head() {
	echo '<style type="text/css" media="screen">

.hyper-image {
	padding: 0 !important;
	height: 64px;
	overflow: hidden;
	display: block;
	text-indent: -999999px;
	color: #000;
	}

.hyper-image a{
	display: block;
	width: 100%;
	height: 100%;
	}

.hyper-image a:hover {
	background-position: bottom left;
	opacity:0.5;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	}

	</style>';
}

Thank you for all your help, I really appreciate it.

EDIT: I’m using Safari (Mac) and I just tested in Firefox (Mac) and the background image has no corner clipping at all, even when not hovering over. I have access to Windows so can try IE/FF/Chrome later, but it suggests the clipping is not being applied at all, possibly because we’re styling the background of the anchor now, rather than the background of the widget like before?

Got the rollover working! Woo!

After much head scratching and checking my code against every other CSS rollover example I could find, I finally ran across this old post. Turns out, the inline style takes precedence over the hover style so it overrides the background positioning. I had to amend my code to specifically target the background-image.

CSS:

.hyper-image {
	padding: 0 !important;
	overflow: hidden;

	}

a.rollover {
	background-repeat: no-repeat;
	display: block;
	height: 64px;
	text-decoration: none;

	}

a.rollover:hover {
	background-position: 0% 100%;
	}

HTML & PHP

echo '<a href=' . $link_url . ' class="rollover" style="background-image:url(' . $image_url . ');">Click here to read our latest newsletter</a>';

There’s still the issue of the hidden overflow not working when changing the opacity, but I don’t need to use opacity now that I can have a colour and greyscale image together and so on.

Also, I’ve noticed the hidden overflow doesn’t work at all in Firefox (Mac). I’ll do some more testing in IE/Chrome/FF(Win) etc and see how it looks. If anyone has any other suggestions, i’m all ears.

It seems the overflow problem in FF is because of the way they’ve implemented the new spec (as far I understand it from the bug reports i’ve read). The only work around seems to be setting the background-image of a div and giving it a defined size.

That’s not ideal for my plugin since the size is dependent on the image the user chooses and i’m trying to keep styles out of the plugin as much as possible. If anyone else has a fix, i’m all ears.

Have a lot of code to port over to the live site and then i’ll try my plugin in IE. Hopefully there won’t be any more surprises.

Found this thread via google search. I’ll be interested in this project of yours. I need a plugin that will show an image when I scroll over a navigation link. But I’d like to create a div underneth the navigation menu where the images will appear during scroll overs.

You mentioned there might be other plugins out there in your first post, could you tell me what you’ve come across. Is there anything that works similar to what I described above.

Thanks