Solved

DHTML problem in IE that works in Firefox

Posted on 2006-12-01
4
698 Views
Last Modified: 2008-01-09
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
Comment
Question by:carled
  • 2
4 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 18053097
It is vastly preferable to have the Html rather than snippets of vbscript. can you paste a view-source version ?
0
 
LVL 1

Author Comment

by:carled
ID: 18053171
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
 
LVL 1

Author Comment

by:carled
ID: 18053977
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
 
LVL 1

Accepted Solution

by:
DarthMod earned 0 total points
ID: 18058720
PAQd, 250 points refunded.

DarthMod
CS Moderator
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now