Page is a not externally linkable
scalfy - 10:36 am on Jun 20, 2011 (gmt 0)
Hello all
I have set up an imagemap with a circular hotspot. This acts as a "button" on my index splashpage that links the user into the website proper.
On hover over I want for the hotspot to change into another image (really the same image but with inversed colours)
and its driving me nuts !
I've looked into image sprites, css imagemaps and jquery plugins like wunderkind (http://wunderkind.hokuten.net/) and have been trolling forums but I cannot get anything working.
preferably I want to do this without having to use javascript, but in my internet wanderings I'm thinking that I'm going to have to use it (I know virtually nothing of javascript!)
I found this thread
[webmasterworld.com ]
which is almost exactly what I needed but I couldnt get the javascript working for my code.
I thought this would be relatively simple to achieve, but i am really struggling
I have attached my code at the bottom,
Any help would be super appreciated!
Scalfy
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>The Spindle Sideshow</title>
<link rel="stylesheet" type="text/css" href="spindlehome.css" />
<link rel="Shortcut Icon" href="favicon.gif"/>
<meta name="description" content="Join the caravan under the Big Top for a night of Beauty Fashion and Music"/>
<meta name="keywords" content="spindle,sideshow,ede,mary,skirt,luke,dette,townsville,fashion,parade"/>
</head>
<body>
<div id="wrapperhome">
<img src="images/splashpage.png" width="1000px" height="800px" alt="Homepage Image" usemap="#splashpage" />
<map name="splashpage" title="enter site">
<area shape="circle" coords="754,406,111" href="tickets.html" />
</map>
</div> <!-- close wrapperhome -->
</body>
</html>