WordPress.org

Ready to get started?Download WordPress

Forums

Image widget with rollover and hyperlink (9 posts)

  1. Garfield1983
    Member
    Posted 3 years ago #

    Hi all, i'm working on my first plugin and would be grateful of a little help.

    I'm trying to create a simple plugin that provides a sidebar widget with a background image that links to a url supplied by the user. I also want the image to change when the user hovers the mouse over the image.

    There may be widgets out there like this already, but this is more of a personal learning exercise (although I would be interested in some examples as I do actually have to use this on a live website, so I need something that actually works). I know this is already possible by pasting code into a text widget, but I would like to give the user a simple backend for the link, and later add in other options as my experience grows.

    I've had limited success with a couple of approaches. 1) I can define the image and the link in my widget php file with the following code - the $name (really the url but I haven't changed the name yet) and the $image values are strings read in from the widget settings:

    echo '<a href=' . $name . '><img src=' . $image . ' /></a>';

    The image works as a link but the rollover doesn't work (the rollover is defined in the css, shown below)

    If I only supply the link, and set the background image of the widget in the stylesheet, the rollover works but then there is nothing to fill the link with, meaning there's nothing to click (the css is the same for both approaches, but only the second has the background rule):

    echo '<a href=' . $name . '></a>';
    .hyper-image {
    	padding: 0 !important;
    	height: 64px;
    	width: 300px;
    	overflow: hidden;
    	background: url(images/bg_rollover.png);
    	top left no-repeat;
    	display: block;
    }
    
    .hyper-image:hover {
    	background-position: bottom left;
    }

    I'm probably doing something very silly. It's actually not often that I work with image links and aside from modifying wordpress themes, I don't know a lot about php.

    I would appreciate another insight, thank you.

  2. Garfield1983
    Member
    Posted 3 years ago #

    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.

  3. davoscript
    Member
    Posted 3 years ago #

    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.

  4. Garfield1983
    Member
    Posted 3 years ago #

    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

  5. davoscript
    Member
    Posted 3 years ago #

    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.

  6. Garfield1983
    Member
    Posted 3 years ago #

    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?

  7. Garfield1983
    Member
    Posted 3 years ago #

    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.

  8. Garfield1983
    Member
    Posted 3 years ago #

    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.

  9. larssonk22
    Member
    Posted 3 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic