Matthew wrote:
Hi all
I'm looking for a solution that can be used in a calendar/gig guide
scenario where each day is represented by a dot image. Now this dot
must do the following
1. When the mouse goes over the dot image it swaps to the mouseover
dot 2. When the mouse goes out of the dot image it restores back to the
original img
3. When the img is clicked the dot image is swapped with another
image (different to the other 2) that will remain there even when the mouse
goes out of the image
I've been searching high & low for an answer but with no luck
Any gurus out there able to help ???
Cheers
Matthew
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://snaught.com/JimsCoolIcons/Marbles-W/">
<style type="text/css">
table {
width: 400px;
margin: 100px auto;
border-collapse: collapse;
border: 3px #fff inset;
}
td {
font: bold 11px tahoma;
border: 1px #000 solid;
background: #fafffa;
}
</style>
<script type="text/javascript">
//:::::::::::::::::::::::::::::::
var overurl = 'green-glass.jpg';
var outurl = 'green.jpg';
var clickurl = 'red-glass.jpg';
//:::::::::::::::::::::::::::::::
function init()
{
function over()
{
if (!/red/.test(this.src))
this.src = this.src.replace(outurl, overurl);
}
function out()
{
if (!/red/.test(this.src))
this.src = this.src.replace(overurl, outurl);
}
function click()
{
this.src = clickurl;
}
var i = 0,
img,
imgs = document.getElementsByTagName('img');
while (img = imgs.item(i++))
if (img.className == 'swap')
{
img.onmouseover = over;
img.onmouseout = out;
img.onclick = click;
}
var plover = new Image().src = 'green-glass.jpg';
var plclick = new Image().src = 'red-glass.jpg';
}
window.onload = function()
{
if (document.getElementsByTagName)
init();
}
</script>
</head>
<body>
<table cellspacing="1">
<tbody>
<script type="text/javascript">
document.write('<tr>');
var d = 0;
while (d < 31)
{
if (d && d % 7 == 0)
document.write('</tr><tr>');
document.write('<td><img class="swap" src="green.jpg">',++d,'</td>');
}
document.write('<td></td><td></td><td></td>');
</script>
</tbody>
</table>
</body>
</html>
