Forum Moderators: not2easy
I'm trying to replicate the thumbnail selector found on Digg's "Submit story" form.
It's a series of radio buttons with thumbnail images in order to select which thumbnail you want to use for your submitted story.
When you hover over a thumbnail and click on that image, the radio button gets selected.
Under Firefox(3) it just works like I want to. But under IE(7), when the cursor moves over the image and you click on it, the radio button don't get selected. It's like IE ignores the "z-index" or something.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
img {border: none;}
div {clear: right; margin-bottom: 1em; padding-bottom: 0pt;}
label {color: #817a71; display: block; float: none; font-size: 105%; font-weight: bold; letter-spacing: -0.03em;}
input {padding: 3px 7px !important;; line-height: 1;}
.sub-thumbs {
width: 150px;
}
.radio-img {
float: left;
height: 110px;
margin: 1em 10px 0pt 3px;
position: relative;
width: 120px;
}
.radio-img label {
border: 1px solid #b7ceeb;
height: 110px;
margin: 0;
overflow: hidden;
width: 120px;
}
.radio-img label:hover,
.radio-img label:active {
border: 1px solid #7e8ea2;
cursor: pointer;
left: 0;
position: absolute;
top: 0;
z-index: 201;
}
.wrap {
border: 1px solid #a7a7a7;
left: 30px;
padding: 2px;
position: absolute;
top: 15px;
z-index: 100;
}
.radio-img input {
left: 5px;
position: absolute;
top: 45px;
z-index: 301;
}
-->
</style>
</head>
<body>
<div class="sub-thumbs">
<div class="radio-img">
<label for="123"> </label>
<div class="wrap">
<img src="image.jpg" width="80" height="76" />
</div>
<input type="radio" id="123" />
</div>
<div class="radio-img">
<label for="123"> </label>
<div class="wrap">
<img src="image.jpg" width="80" height="76" />
</div>
<input type="radio" id="123" />
</div>
</div>
</body>
</html>Thanks in advance for any help!
not quite sure exactly how they're doing it if it works for them in IE6/7 because
:hoverDigg are actually using a background image, which is a nice simple way to get hover effects to work, and there are very simple scripts out there to get IE to recognize hover on any elements.
With the code example below in IE6 and below the actual fancy hover effect won't work, the border won't change color, the cursor won't change and the background image can't be changed - but that's the bit that can be added, the "whole box" click to select the radio input (the functionality) will work though as the label becomes the container for the "thumbnail", text and the input.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">/** container for floated labels ***/
.radios {float: left; width: 100%;}/** you can use the whole label for your "box" **/
.radios label {float: left; width: 120px; height: 120px; border: 1px solid #ddd; margin: 5px; display: inline;}/** won't work in IE6 or below withou a script to encourage it **/
.radios label:hover, .radios label:active {
border: 1px solid #7e8ea2;
cursor: pointer;
}/* make the caption text into a block and position it from the top of your box using a top margin **/
.radios span {display: block; text-align: center; margin-top: 80px; font-size: 18px; font-weight: bold;}/** add your images as background images - these too could then be changed on hover for compliant browsers **/
.radios label.news {background: url(news.img) no-repeat 50% 50%;}
.radios label.video {background: url(video.img) no-repeat 50% 50%;}
.radios label.image {background: url(image.img) no-repeat 50% 50%;}</style>
</head>
<body>
<div class="tab"><h3>Choose Media</h3></div>
<div class="radios">
<label for="type-news" class="news"><input id="type-news" name="type" value="0" type="radio"> <span>News Article</span></label>
<label for="type-video" class="video"><input id="type-video" name="type" value="3" type="radio"> <span>Video</span></label>
<label for="type-image" class="image"><input id="type-image" name="type" value="2" type="radio"> <span>Image</span></label>
</div>
</body>
</html>
note are in the CSS for the thought process behind this,
then do a search for [whatever:hover] to get an IE script which will take care of hover and active for you, without adding to the HTML
hth
