View Full Version : How to add text to a mouseover imageswap

12-24-2006, 02:12 AM
I have an image swap on mouseover already but would like text to appear on the swap. I already have the text in the array below but it doesn't show up. What needs to be done to achieve this? Thank you in advance.

<script type="text/javascript">


["../Gallery_Images/PhotoArt_Gallery/Swim_Kids_Before.jpg","../Gallery_Images/PhotoArt_Gallery/Swim_Kids.jpg","PhotoArt created using Smudge Stick & Photo Filter effects."],

["../Gallery_Images/PhotoArt_Gallery/4_Kids_Before.jpg","../Gallery_Images/PhotoArt_Gallery/4_kids_on_Red.jpg","PhotoArt created by using Watercolor & Glow effects."],

["../Gallery_Images/PhotoArt_Gallery/Dennis_Before.jpg","../Gallery_Images/PhotoArt_Gallery/Dennis_paint.jpg","PhotoArt created by using a Paint Daub effect."],

["../Gallery_Images/PhotoArt_Gallery/Sam_Garden_Wtrcolor_Before.jpg","../Gallery_Images/PhotoArt_Gallery/Sam_Garden_Wtrcolor.jpg","PhotoArt created by using Watercolor, Glow, & Photo Filter effects."],

["../Gallery_Images/PhotoArt_Gallery/Pink_Buds_Before.jpg","../Gallery_Images/PhotoArt_Gallery/Pink_Bud_Dry_Brush.jpg","PhotoArt created using a Dry Brush paint effect."],

["../Gallery_Images/PhotoArt_Gallery/Zack_Red_Before.jpg","../Gallery_Images/PhotoArt_Gallery/Zack_Red.jpg","PhotoArt created using Poster, Photo Filter, Glow, Twirl, Sphere, & Curve effects."] // no comma at the end of last index


function swapOver(n){





<div align="center"><img name="bigpic" src="../Gallery_Images/PhotoArt_Gallery/Swim_Kids_Before.jpg"></div>

12-24-2006, 04:28 AM
Well, thatís not hard, assuming that each image already has its own special container. Hereís an example (http://jsg.byethost4.com/demos/CF%20103638%20Demo.html) where a caption is dynamically added below each image. Note that the parentNode.lastChild that Iíve targeted is white‐space between the image and its container; thereís no such white‐space in your image container so youíd either need to add some or create a new text node (createTextNode()) and append it with something like appendChild.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="Author" content="Patrick Garies"/>
<title>CF 103638 Demo</title>

<style type="text/css">
body {
display: table;
margin: 0 auto;
body > div {
display: table-row;
div div {
float: left;
margin: 0.5em;
border: 1px double #ccc;
padding: 1em;
background-color: #222;
color: white;
text-align: center;
img {
display: block;
margin-bottom: 1em;

<script type="text/javascript">
var images = new Array();
images[0] = new Array("Article A", "article_a.png", "Article D", "article_d.png", "D in Viridian");
images[1] = new Array("Article B", "article_b.png", "Article E", "article_e.png", "E in Amethyst");
images[2] = new Array("Article C", "article_c.png", "Article F", "article_f.png", "F in Bronze");
window.onload = function() {
var image = document.getElementsByTagName("img");
for (var i = 0; i < image.length; i++) {
eval("image[i].onmouseover = function() {\
this.alt = images[" + i + "][2];\
this.src = images[" + i + "][3];\
this.parentNode.lastChild.data = images[" + i + "][4];\
eval("image[i].onmouseout = function() {\
this.alt = images[" + i + "][0];\
this.src = images[" + i + "][1];\
this.parentNode.lastChild.data = \"\";\


<img alt="Article A" width="150" height="150" src="article_a.png"/>
<img alt="Article B" width="150" height="150" src="article_b.png"/>
<img alt="Article C" width="150" height="150" src="article_c.png"/>


12-24-2006, 12:55 PM
Thank you for taking the time to help me Arbitrator.
It works perfect :thumbsup: