hello,
I'm writing a panoramic image viewer in javascript. When the mouse is over
the image, I want it to be a crosshair (over most of the image), or a
hand/pointer (when it's over an image map region). The image map is
created in javascript, but doesn't set any 'cursor' style rules.
The problem I'm having is I have two images embedded inside two divs. The
outer div has style='... cursor:crosshair', but when I move over the image
(which covers the same area as the div), the pointer doesn't change. If I
look in the DOM inspector (in Firefox 1.5), the computed style for the
cursor property is 'pointer' on both images. I don't understand how this
could be happening, as I've never set this property for the images, and I
thought it should follow automatically the enclosing node. The html is
pasted below.
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Middlewood Virtual Tour page</title>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript" src="js/pano.js"></script>
</head>
<body>
<h2 id="heading">Middlewood Virtual Tour demo page</h2>
<table border="0" cellpadding="0" cellspacing="10px" width="100%">
<column width="70%" /><column width="30%" />
<tbody>
<tr>
<td valign="top">
<div id="panoDiv" style="position: relative; top: 0px; left: 0px; overflow:hidden; cursor:crosshair">
<div id="panoInnerDiv" style="" >
<span id="panoMsg" style="visibility: visible"><b>Please wait while the image loads...</b><br /><br /> If it doesn't load, you may be using an incompatible browser - this page views best under mozilla firefox.</span>
<img src="" alt="" style="position: absolute; left: 0px; top: 0px; visibility: hidden; z-index:1; border:0px;" id="panoImage1" usemap="#panoMap">
<img src="" alt="" style="position: absolute; left: 0px; top: 0px; visibility: hidden; z-index:1; border:0px;" id="panoImage2" usemap="#panoMap"></div>
</div>
</td>
<td valign="top">
To scroll the panorama, click in the image and hold the mouse button down. Hover over the circle icons to find out more about the object. The arrow icons show paths you can take (not finished yet.)<br />
If the panorama doesn't scroll, try refreshing the page - there is an occasional bug which does this.<br /><br />
<span id="panoInfo">
</span>
<p id="message1"> </p>
<p id="message2"> </p>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<table border="0px" cellpadding="0px" cellspacing="10px">
<column width="20%" />
<column width="80%" />
<tbody>
<tr>
<td valign="top">
Viewport size:
<select name="resSelect" id="resSelect">
<option value="400">400 pixels high</option>
<option value="280" selected>280 pixels high</option>
<option value="200">200 pixels high</option>
<option value="140">140 pixels high</option>
<option value="100">100 pixels high</option>
</select>
</td>
<td valign="top">
<span id="panoControl"></span>
</td>
</tr>
</tbody>
<table>
</td>
</tr>
</tbody>
</table>
<input type="checkbox" name="showClicks" id="showClicks"> Record mouse clicks<br />
<span id="clickSpan"></span>
<p> </p>
</body>
</html>
--
http://www.niftybits.ukfsn.org/
remove 'n-u-l-l' to email me. html mail or attachments will go in the spam
bin unless notified with [html] or [attachment] in the subject line.
