Matthew wrote:[color=blue]
> 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[/color]
must[color=blue]
> do the following
>
> 1. When the mouse goes over the dot image it swaps to the mouseover[/color]
dot[color=blue]
> 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[/color]
image[color=blue]
> (different to the other 2) that will remain there even when the mouse[/color]
[color=blue]
> 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[/color]
<!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>
