Clickable image on a <div>?

Hi, I was coding a simple radio player (simple, I’m a noob at HTML) and added buttons and text areas, being the first button a PLAY, the second a PAUSE and the two areas on the right side being one to display the DJ/song playing and the other to show how many Listeners are online.

However, the areas are liking to the PAUSE button link even as on different divs.

Resuming, when I open the page on browser, when I hover the mouse on the DJ and Listeners area it allows me to click, liking to where I linked the PAUSE button (pause.hml).

What can I do to prevent this?

Here is my code :

<!DOCTYPE html PUBLIC “-//WC//DTD XHTML . Transitional//EN” “http://www.w.org/TR/xhtml/DTD/xhtml-transitiona…

<html xmlns=”http://www.w.org//xhtml%%E

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-” />

<title>Play</title>

<style>

body {

background-image: url(images/top-repeat.png);

background-position: center top;

background-repeat:repeat-x;

}

#content {

width: px ;

margin: auto;

}

#content-container {

width: px ;

margin-left: px;

}

#image-logo {

float: right;

}

.has_errors { border: px solid #ff }

.errors {color: #ff;}

#apDiv {

position: absolute;

left: px;

top: px;

width: px;

height: px;

z-index: ;

}

#apDiv {

position: absolute;

left: px;

top: px;

width: px;

height: px;

z-index: ;

}

#apDiv {

position: absolute;

left: px;

top: px;

width: px;

height: px;

z-index: ;

}

#apDiv {

position: absolute;

left: px;

top: px;

width: px;

height: px;

z-index: ;

}

</style>

</head>

<body>

<div id=”apDiv”>

<a href=”play.html”><img src=”images/play-button.png” onmouseover=”this.src=’images/play-button-over.png'” onmouseout=”this.src=’images/play-button.png'” width=”” height=”” /></a>

</div>

<div id=”apDiv”>

<a href=”pause.html”><img src=”images/pause-button.png” onmouseover=”this.src=’images/pause-button-over.png'” onmouseout=”this.src=’images/pause-button.png'” width=”” height=”” />

</div>

<div id=”apDiv”><img src=”images/dj-area.png” width=”” height=”” /></div>

<div id=”apDiv”><img src=”images/listeners-area.png” width=”” height=”” /></div>

</body>

</html>

Update:

Sorry Connie, changing the width and height didn’t change nothing :/

See also  Is This A Good Idea To Add To My Tumblr?

Update :

Problem solved lol I forgot to put the closing </a> tag lol.

✅ Answers

? Favorite Answer

  • May be something to do with the fact that the some of the height of the DIVs are smaller than the image they contain

    e.g. apDiv (width: px; height: px;) contains an image with width , height

  • press eject

  • Other Related Questions

    Learning Visual Basic ?

    Answers Favorite AnswerTry using "System.Diagnostics.Process. GetProcessesByName( "iwmp" ).Length > " for your check.

    Microsoft Office word Fast answer needed its urgent?

    Answers Favorite AnswerTry this:http://www.techsupport.com///microsoft-wo...Here is another thread re: the same issue with instructions:http://www.pcreview.co.uk/forums/modification-not-...http://www.techsupport.com///microsoft-wo...http://support.microsoft.com/kb/http://answers.microsoft.com/en-us/office/forum/of...

    Can I download a whole city android google maps?

    Answers Favorite Answer:) Yes!!!Interesting question. I wonder why it has blocked in this way especially considering that Google Earth is very detailed and has good maps of Israel.

    What is meant by ROM ? Explain in simple but elaborate terms.What about mobile ROM’s?

    Answers Favorite AnswerHi Diva below is a link that will give a simple answer.http://wiki.answers.com/Q/What_does_ROM_stand_for_...Hope this helps.Source(s): Experience and wiki answers.ROM is Read only memory. i.e data can write only once.There two types of ROM..ROM.PROMThe difference between ROM and PROM.that is ROM is programmed during manufacturing it means data stored by manufacturing company.PROM is blank memory that a user programmable memory.user can store content on PROM.both ROM and PROM are Read only memory Data can write only once.and its not possible to write so many time.Memories of PROM and ROM are Non-volatile in nature. Its that stored informations can retain even power goes off.

    Leave a Comment