I have images of record albums that display in a grid and when you click on one it will play the record. I'd like to make a play button appear over the image sort of like in the Mac Finder Preview to indicate that the record is playable. I've seen this done on many sites before but I couldn't quite figure it out how.

This is what I have so far. First, there are two styles:

.record-play-button-off {
    display: none;
}

.record-play-button-on {
    background: url(../images/play_btn.png) no-repeat;
    -moz-opacity:.80;
    opacity:.80;
    filter:alpha(opacity=80);
    position:relative;
    top:80px;
    left:15px;  
    z-index:100;
    width:60px;
    height:60px;
    margin: 0;
    padding: 0;
}

Then in the HTML, each image tag gets created like this:

            <div class="play-button record-play-button-off"></div>
            <a class="rbox-player-paused rbox-player-play"
                href="{{ record.play_record_uri }}" >
                    <img src="{{ record.thumb_uri }}" 
                        class="thumbnail" 
                        height="{{ record.thumb_height }}" 
                        width="{{ record.thumb_width }}" />
            </a>

In JavaScript I'm basically querying for div.play-button and toggling the class between record-play-button-off and record-play-button-on when the user hovers over the image of the record. This shows the play button over the image like I want but it screws up the layout (it gives the affect of adding extra top margin even though the play button fits over the image). What is the way to get it to overlay on top of the image without affecting the space around the image? I can send a screenshot of this if that's more helpful.

  • No need for javascript zemodo about 7 years ago
  • .. zemodo about 7 years ago

4 answers

5
points
This was chosen as the best answer

This is how I would do it (rough idea of the code, as I am just typing it here and not testing!)

HTML:

         <a class="record" href="{{ record.play_record_uri }}" >
            <span></span>
                <img src="{{ record.thumb_uri }}" 
                    class="thumbnail" 
                    height="{{ record.thumb_height }}" 
                    width="{{ record.thumb_width }}" >
        </a>

CSS:

 a.record{
 display:block;
 position:relative;
 width: {whatever};
 height: {whatever};
 }

a.record:hover span {
    background: url(../images/play_btn.png) no-repeat;
    -moz-opacity:.80;
    opacity:.80;
    filter:alpha(opacity=80);
    display:block;
    position:absolute;
    top:80px;
    left:15px;  
    z-index:100;
    width:60px;
    height:60px;
}

No need for javascript to swap images: it only appears on :hover. The relative and absolute positioning will make sure there are no layout issues. Also there are less classes and HTML clutter.

Please let me know if I made a mistake, this is just something I threw together :)

Answered over 7 years ago by Shaun Robinson
0
points

have you considered using image sprites?

You'd create an image that contains both on and off states, then set the position the the link and hover.

example would be a link that 100px by 100px, css may be:

a:link{ 
background: url(yoursprite.gif) no-repeat 0px 0;
}

a:hover{ 
background: url(yoursprite.gif) no-repeat -100px 0;
}
Answered over 7 years ago by Paul Cripps
0
points

i'd use the hover over the album cover to display the button, and the hover over the play button to alter states on the button itself.

<div class="album">
  <img src="album-cover">
  <a href="play-record-uri" class="play">Play Album_Name</a>
</div>

with this markup and no css or js, you'll have the album cover and a link to your media, ideally. so it should be presentable and fully functional in this state.

now, with css, you can get the play button to show up only on hover:

/* set up the album cover div, with position: relative so that the play button positioning works */
.album {
  position: relative;
  width: 120px;
  height: 120px;
}

/* make the play link a block element, use text-replacement for a play button graphic, and hide it with display: none */
.album a.play {
  display: none;
  position: absolute;
  left: 50px;
  top: 50px;
  width: 20px;
  height: 20px;
  background: transparent url(path-to-play-image) no-repeat;
  text-indent: -2000em;
  overflow: hidden;
}

/* change the position of the background image on hover over the play link, to give it an active state with an image sprite */
.album a.play:hover {
  background-position: 0 -20px;
}

/* finally, on hover over the album cover, display the play link */
.album:hover a.play {
  display: block;
}

then, you'd hook up your javascript to play the audio if you don't want to send the user to a different page.

finally, i'd use ie7.js to enable hover behavior on non-anchor elements for ie6. this would also provide a transparent png fix if you wanted to use that for the play button.

alternatively, you could use the album cover itself as the play link and then the hover state would work fine in ie6 without resorting to js. i think keeping the album cover and the play link separate create clearer markup, though. just a matter of taste.

Answered over 7 years ago by River Bandon
-1
points

Hi Kumar,

I haven't had time to read through all your code, but the way this is done is essentially having the image of the record as the background within a DIV, then adding an image over the top of that DIV, it would need to be a transparent PNG-24 for the Play/Pause Button.

You would then use JavaScript to change the image dependent on its state.

Answered over 7 years ago by Jake Holman