custom field and image rollover

  • Resolved esferapublica

    (@esferapublica)


    15 years, 8 months ago

    I’m loading post thumbnails via custom fields in my wordpress theme and would like to make an image rollover.

    Right now I’m calling the image like this:

    <a class="thumb" style="background:url(<?php $values = get_post_custom_values('thumb'); echo $values[0]; ?>) no-repeat;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"></a>

    And have this in my CSS:

    a.thumb {
	display: 		block;
	width: 			150px;
	height: 		85px;
	padding: 		0px;
	text-decoration: none;
}

a.thumb:hover {
	background-position: 0 -150px;
}

    But it doesn’t work. Has anybody an idea???

Viewing 4 replies - 1 through 4 (of 4 total)
  • Michael

    (@alchymyth)

    15 years, 8 months ago

    i would try yo use just ‘background-image:’ in the inline style, and the rest in style.css; and also define a background-position for the link:
    http://www.w3schools.com/css/css_background.asp

    <a class="thumb" style="background-image:url(<?php $values = get_post_custom_values('thumb'); echo $values[0]; ?>) ;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"></a>

    a.thumb {
	display: 		block;
	width: 		150px;
	height: 		85px;
	padding: 		0px;
	text-decoration: none;
         background-repeat: no-repeat;
         background-position: 0 0;
}

a.thumb:hover {
	background-position: -150px 0;
}

    a link to your site with the work-in-progress would be helpful.

    Thread Starter esferapublica

    (@esferapublica)

    15 years, 7 months ago

    Hey alchymyth,

    first: thanks for your help. This already looks like it could work. But how can I define the rollover Image. It’s a custom field aswell, named »thumb_over«.

    You can see my site in progress here.

    thx, karina

    Michael

    (@alchymyth)

    15 years, 7 months ago

    the background image is made of two halves: the ‘normal’ on the left, and direct to the right the ‘rollover’ image.
    the background position is moved during :hover – see styles.

    a.thumb:hover {
	background-position: -150px 0;
}

    this means: move background imgage 150px to the left on hover.

    search the web for tutorials on ‘css sprite’ techniques.

    Thread Starter esferapublica

    (@esferapublica)

    15 years, 7 months ago

    Hey alchymyth,
    this works! perfectly explained. thanks a a lot.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘custom field and image rollover’ is closed to new replies.