Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 709
  • Last Modified:

DHTML problem in IE that works in Firefox

OK, so I have a simple page (code below) that shows a .png map image (which already contains the vehicle location in the image created), which is created by a server component. I want to have "mouseover" functionality on the vehicle on the map, so I am dynamically creating an image hotspot at the same location as the vehicle, so that I can set "mouseover" and later "onclick" events that relate to the vehicle under the hotspot.  The code below works fine for Firefox and when I mouseover the hidden hotspot, it triggers the event and I get my divs showing up (two divs to create a pseudo drop shadow effect).  However, IE doesn't do a thing...

The map image HAS to be an "input button" for the form because there is also essential functionality that relies on the cursor x/y being returned when the map image is clicked and the form is submitted.  I have found out that Firefox supports "usemap" on input images, but IE doesn't, so I need a work around that suits all browsers (pref. with some backward compatibility to IE4+ really, if possible).  I tried setting the map image to being a pure image and doing an "onclick submit form" sort of logic, which worked great and made the hotspot work in IE, but I lost the x/y coords returned from the map image click!

I then experimented with using a hidden div over the vehicle instead of a hotspot, but neither browser triggers the "onmouseover" event for a div with visibility set to "hidden" so that doesn't work either...  There's probably a smart solution (or even a simple one) that I'm missing here and if anyone has any bright ideas, I'd love to hear them!

<code>
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%
Dim mapimage, myX, myY, mwidth, mheight

Function doMapImage()
...some vbscript code creates and stores "mapimage" variable & sets mwidth & mheight
End Function

Function doCoords()
...some vbscript code creates vbscript map coords in format "x1,y1,x2,y2" that match vehicle pos
End Function

Sub setVehicleLoc()
...some vbscript goes to sql database and gets current location and sets myX and myY
End Sub

Function formatVehicleString()
...some vbscript that sets a text string with description and registration details
End Function
%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Map Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript1.2" type="text/javascript">
<!--
function doVehiclePopup(xContent, xFunction) {
      document.getElementById('vehicle1_inner').innerHTML=xContent;
      document.getElementById('vehicle1').style.visibility=xFunction;
}

//-->
</script>

<style type="text/css">
<!--
#vehicle1 {
      position:absolute;
      left:<%=myX+10%>px;
      top:<%=myY-70%>px;
      z-index:1;
      visibility:hidden;
}
.out {
      display:block;
      position:relative;
      margin:1em 0;
      background-color: #666666;
      border-top-style: none;
      border-right-style: none;
      border-bottom-style: none;
      border-left-style: none;
  }
.in {
      text-align:left;
      border:1px solid #555;
      position:relative;
      padding:5px;
      font-size: 10px;
      background-color: #FFFFCC;
  }
.ltin {
  left:-5px;
  }
.tpin {
  top:-5px;
  }

body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      background-color: #E3E3D5;
}
-->
</STYLE>
</head>
<body>
      <div id="vehicle1" class="out">
              <div id="vehicle1_inner" class="in ltin tpin">Vehicle Info</div>
      </div>

        <form id="mapform" name="mapform" method="post" action="testmap.asp" target="_self">
          <input name="mapimage" type="image" style="position:relative" title="MapImage" src="<%=mapImage%>" width="<%=mWidth%>" height="<%=mHeight%>" border="0" alt="Map Image" usemap="#MapSpots"/>
        </form>
      <map name="MapSpots" id="MapSpots">
        <area shape="rect" id="vMapSpot" coords="<%=doCoords%>" href="#" onmouseover="doVehiclePopup('<%=formatVehicleString%>', 'visible');" onmouseout="document.getElementById('vehicle1').style.visibility='hidden';"onclick=""/>
      </map>
</body>
</html>

</code>
0
carled
Asked:
carled
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
It is vastly preferable to have the Html rather than snippets of vbscript. can you paste a view-source version ?
0
 
carledAuthor Commented:
Well... not that it makes too much difference, but no probs.

Here's what it looks like "on page"

<div id="vehicle1" class="out">
  <div id="vehicle1_inner" class="in ltin tpin">Vehicle Info</div>
</div>

<form id="mapform" name="mapform" method="post" action="testmap.asp" target="_self">
            
<input name="mapimage" type="image" style="position:relative" title="MapImage" src="/maps/457024cb_575d_0.png" width="1060" height="703" border="0" alt="Map Image" usemap="#MapSpots"/>

<map name="MapSpots" id="MapSpots">
   <area shape="rect" id="vMapSpot" coords="520,341,540,361" href="#" onmouseover="doVehiclePopup('<strong>Merc Sprinter 311mwb</strong> - <strong>01 December 2006 12:20:43</strong><br>Stationary, 4 sats locked<br>Malden Street<br>NEAR BRISTOL ', 'visible');" onmouseout="document.getElementById('vehicle1').style.visibility='hidden';"onclick=""/>
</map>

And this works beautifully in Firefox...
0
 
carledAuthor Commented:
Never mind. I fixed it myself. All I did was add another non-hidden div with the same pixel coords, then I put a transparent gif in the div and put the mouseover events on that instead. Works a charm in all sorts of browsers.
0
 
DarthModCommented:
PAQd, 250 points refunded.

DarthMod
CS Moderator
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now