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  Using the Web Audio API, can I change the default analysis window for the Fourier Transformation?

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

  • Leave a Comment