Need help with changing images

Question

Mr.UNOwen 0 Junior Poster

18 Years Ago

Hello,

I just started using HTML and I need help making a web page for someone. The trouble I'm having is that I don't know how to change images when the mouse is over a link (the link is not the image, it's only text). Basically whenever the user hovers their mouse over the link an image will show up, that relates to the topic of the link. FYI: I'm creating an online tutorial.

Thanks

html-css user-interface web-design

3 Contributors
5 Replies
120 Views
3 Days Discussion Span
Latest Post 18 Years Ago Latest Post by Mr.UNOwen

Dani AI

Generated 9 Months Ago

Short summary and a simple, modern way to do what you want (rollover an image when the mouse is over a text link). and showed the classic Dreamweaver/inline-JS approach — that works — but a small, maintainable pattern is cleaner: put a single "preview" image element where you want the picture to appear, give each link a data- attribute that names the image to show, then swap the preview src on mouseenter/mouseleave (also handle focus/blur for keyboard users). This keeps links and images separate and is easy to update.

Minimal example (HTML + JS):

<div class="toc">
  <a href="lesson1.html" data-img="images/html.png">HTML basics</a>
  <a href="lesson2.html" data-img="images/css.png">CSS basics</a>
</div>

<img id="preview" src="images/placeholder.png" alt="Topic preview" width="320" height="180">

<script>
  const preview = document.getElementById('preview');
  document.querySelectorAll('.toc a').forEach(link => {
    const img = link.dataset.img;
    link.addEventListener('mouseenter', () => preview.src = img);
    link.addEventListener('focus', () => preview.src = img);
    link.addEventListener('mouseleave', () => preview.src = 'images/placeholder.png');
    link.addEventListener('blur', () => preview.src = 'images/placeholder.png');
  });
</script>

Practical tips and troubleshooting:

Store images in your site folder (commonly images/) and reference them with relative paths. If an image doesn't show, check the browser console and the network panel for 404s or wrong paths.
Preload key images so the preview doesn't flicker; modern link rel="preload" is ideal, or create new Image().src = ... in JS. See MDN on data attributes and preloading images.
Accessibility: include useful alt text, and handle focus so keyboard users see the same preview as mouse users.
Performance: resize and compress preview images to the display dimensions to avoid slow loads.

This pattern directly answers 's questions: images live in your project (use relative paths), the preview element controls where images appear, and each link is tied to one image via its data-img attribute.

All 5 Replies

Suneetha Reddy 0 Newbie Poster

18 Years Ago

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/image2.jpg')">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/image2.jpg',1)"><img src="images/image1.jpg" name="Image1" width="100" height="100" border="0" id="Image1" /></a>
</body>
</html>

Suneetha Reddy 0 Newbie Poster

18 Years Ago

<html>
<script type="text/JavaScript">

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

</script>
<body onLoad="MM_preloadImages('give u r 2nd image path')"><a href="give u r url link path" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','give again  u r 2nd image path ',1)"><img src="give u r 1st image path" alt="image" name="Image1" width="100" height="100" border="0"></a>
</body>
</html>

Reply to this topic

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.

Mr.UNOwen 0 Junior Poster · Answer 1 · 2008-07-27T11:33:40+00:00

Thanks, but I'm a little lost in all the code. Could you break it down for me.

Where do I load all the pictures?
How do I go about specifying where the image is to display? (is it same as displaying a normal image)
How do designate an image to each link?

I'm new to this, so the simpler it is, the better.

sreein1986 0 Posting Whiz · Answer 2 · 2008-07-28T13:20:11+00:00

<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

paste the code between head tag

this code paste in body tag

<body onload="MM_preloadImages('images/image_roll.jpg')">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Rollover Image','','images/image_roll.jpg',1)"><img src="images/image.jpg" alt="Rollover Image" name="Rollover Image" width="118" height="34" border="0" id="Rollover Image" /></a>

but image and Rollover images are should be in seperate Image folder, that folder should be Images

If you have dreamwever follow the below steps

(1) open the dreamweaver and create a new html page and save it first
(2) go to and select Insert > Image Objects > Rollover Images
(3) and give orginial, rollover image path and when click the link where you want go to the page
(4) ok

Mr.UNOwen 0 Junior Poster · Answer 3 · 2008-07-29T10:07:06+00:00

Mr.UNOwen 0 Junior Poster

18 Years Ago

Thanks that helped

Need help with changing images

Dani AI

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers