Solved

DHTML problem in IE that works in Firefox

Posted on 2006-12-01
4
700 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When you work with shopping cart / ecommerce relates web sites, you need to pass the certain form post details to the payment gateway process page with required details for the products items you give to order. Also you may need to track the ordered…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn how to count occurrences of each item in an array.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

776 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