Solved

DHTML problem in IE that works in Firefox

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Suggested Courses

627 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