Member Avatar for bookworm619

I want to test out the Adobe Fireworks CS4 and I have to make the image map. You know, the hotspot... But I want to add the on mouseover to the image. Image pop up. The enlarged image of the smaller image. No CSS, please. Just simple on mouseover effect...

I am looking for the effect just like in the website,
http://www.freedigitalphotos.net/images/Dogs_g59.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Fireworks CS3 Dreamweaver CS3 target.  Created Sat Feb 14 17:30:56 GMT-0500 (Eastern Standard Time) 2009-->
</head>
<body bgcolor="#ffffff">
<img name="test" src="test.gif" onmouseover="trailOn('Friends/Ceasar.jpg','1','250');" onmouseout="hidetrail() width="600" height="300" border="0" id="test" usemap="#m_test" alt="" /><map name="m_test" id="m_test">
<area shape="rect" coords="78,24,197,113" href="http://www.myspace.com" title="ceasar" alt="ceasar" />
</map>
</body>
</html>
Ceasar.jpg 33.83 KB
  • 2 Contributors
  • 1 Reply
  • 153 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by Will Gresham

Dani AI

Generated

was right — the page calls functions that don’t exist. Below is a compact, no-external-CSS solution that attaches hover handlers to <area> elements and creates a floating enlarged preview via JavaScript. It sets styles in script (so no stylesheet file), works with image maps, and adds basic keyboard support.

<img id="thumb" src="dogs-thumb.jpg" usemap="#m_dogs" alt="dogs" />
<map name="m_dogs">
  <area shape="rect" coords="78,24,197,113" href="#" alt="ceasar" data-large="Friends/Ceasar.jpg">
</map>

<script>
(function(){
  var preview = document.createElement('img');
  preview.style.position = 'absolute';
  preview.style.display = 'none';
  preview.style.border = '1px solid #333';
  preview.style.background = '#fff';
  preview.style.zIndex = 9999;
  document.body.appendChild(preview);

  function pageXY(e){
    e = e || window.event;
    var x = e.pageX != null ? e.pageX : e.clientX + (document.documentElement.scrollLeft||document.body.scrollLeft);
    var y = e.pageY != null ? e.pageY : e.clientY + (document.documentElement.scrollTop||document.body.scrollTop);
    return {x:x,y:y};
  }

  function position(e){
    var p = pageXY(e);
    var left = p.x + 12, top = p.y + 12;
    var vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    var pw = preview.width || 300, ph = preview.height || 200;
    if (left + pw > (window.pageXOffset||document.documentElement.scrollLeft) + vw) left = p.x - pw - 12;
    if (top + ph > (window.pageYOffset||document.documentElement.scrollTop) + vh) top = p.y - ph - 12;
    preview.style.left = left + 'px';
    preview.style.top = top + 'px';
  }

  var areas = document.querySelectorAll('map area[data-large]');
  for (var i=0;i<areas.length;i++){
    (function(a){
      a.addEventListener('mouseover', function(e){ preview.src = a.getAttribute('data-large'); preview.style.display = 'block'; });
      a.addEventListener('mouseout',  function(){ preview.style.display = 'none'; });
      a.addEventListener('mousemove', position);
      a.addEventListener('focus', function(e){ preview.src = a.getAttribute('data-large'); preview.style.display = 'block'; position(e); });
      a.addEventListener('blur',  function(){ preview.style.display = 'none'; });
    })(areas[i]);
  }
})();
</script>

Notes and troubleshooting:

  • Preload large images (new Image().src = url) to avoid a visible load delay.
  • Very old IE needs attachEvent or inline onmouseover/onmouseout; the above uses addEventListener.
  • Mobile has no hover — consider a tap-to-toggle fallback.
  • Add meaningful alt text and keyboard focusability for accessibility.
  • Clamp positioning (shown) to keep the preview inside the viewport.

Reference: MDN docs for the HTML image map element and mouseover handling:
map element
onmouseover (GlobalEventHandlers)

This addresses the missing trailOn()/hidetrail() functions noted by and shows a practical implementation you can adapt for 's enlarged-image-on-hover effect.

Member Avatar for Will Gresham

First it looks like you just lifted the javascript function from the website you quoted.

You have not defined a function called trailOn() or hidetrail().

There alot of scripts online you can download for free which will do what you are looking for, infact I have found a fair number of them from a keyword search from words in your post.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.