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 :/
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