Issue
Background
I am creating a drop-down menu that shows Asia region.
Each part of the image should redirect the user to a specified link.
Effects wanted to Reach
When the user put their mouse over the region, the image should be changed to orange.
Images
Normal State (newmenu.png)
Hover State (newmenu_hover.png)
Method trying to Accomplish
It will take a while if I cut the image into 8 small pieces. So I decided to use CSS background-position
to finish that.
Problem
As the following image. All links show blue China.
When I put an mouse over it, it will changed to orange China.
#newmenu {
line-height: 24px;
}
#newmenu a:link, #newmenu a:visited {
display: block;
width: 183px;
text-decoration: none;
background-image: url(http://holland.pk/uptow/i4/5e185e55196d23e27ebb99c4a0b55909.png);
}
#newmenu a:hover, #newmenu a:active {
display: block;
width: 183px;
text-decoration: none;
background-image: url(http://holland.pk/uptow/i4/48bd4dd0bb862be01d047f4d38296e4e.png);
}
#newmenu .newmenu_china {
height: 24px;
background-position: 0px 0px;
}
#newmenu .newmenu_hongkong {
height: 24px;
background-position: 0px 24px;
}
#newmenu .newmenu_macau {
height: 24px;
background-position: 0px 48px;
}
#newmenu .newmenu_singapore {
height: 24px;
background-position: 0px 72px;
}
<hr>
## Problems ##
As shown in the following image. All links show blue China.<br>
When I put my mouse onto it, it will changed to orange China.
[![Problem][3]][3]
<hr>
## Source Code (background-url edited) ##
<div class="downmenu" id="newmenu">
<a href="./china.php" id="newmenu_china" target="_blank"> </a>
<a href="./hongkong.php" id="newmenu_hongkong" target="_blank"> </a>
<a href="./macau.php" id="newmenu_macau" target="_blank"> </a>
<a href="./singapore.php" id="newmenu_singapore" target="_blank"> </a>
</div>
Solution
Your id for the links are ID, so you just have to edit the CSS
#newmenu {
line-height: 24px;
}
#newmenu a:link, #newmenu a:visited {
display: block;
width: 183px;
text-decoration: none;
background-image: url(http://holland.pk/uptow/i4/5e185e55196d23e27ebb99c4a0b55909.png);
}
#newmenu a:hover, #newmenu a:active {
display: block;
width: 183px;
text-decoration: none;
background-image: url(http://holland.pk/uptow/i4/48bd4dd0bb862be01d047f4d38296e4e.png);
}
#newmenu #newmenu_china {
height: 24px;
background-position: 0px 0px;
}
#newmenu #newmenu_hongkong {
height: 24px;
background-position: 0px 24px;
}
#newmenu #newmenu_macau {
height: 24px;
background-position: 0px 48px;
}
#newmenu #newmenu_singapore {
height: 24px;
background-position: 0px 72px;
}
<hr>
<div class="downmenu" id="newmenu">
<a href="./china.php" id="newmenu_china" target="_blank"> </a>
<a href="./hongkong.php" id="newmenu_hongkong" target="_blank"> </a>
<a href="./macau.php" id="newmenu_macau" target="_blank"> </a>
<a href="./singapore.php" id="newmenu_singapore" target="_blank"> </a>
</div>
Answered By - EngSiang Teo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.