Solved

DHTML problem in IE that works in Firefox

Posted on 2006-12-01
4
703 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Web Application Architecture 6 84
Display recordset field HTML encoded 21 58
React or Angular? 6 96
migrating to phpbb forum from vBulletin 4.2 3 97
It's sometimes a bit tricky to use date functions in Oracle BPEL. I'll explain quickly how you can add N days to the current date. In a BPEL process this can be useful, and you can adapt it to fit your needs. First of all, let's see how to add 1 …
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 dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

752 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