Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts

    How to add text to a mouseover imageswap

    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.


    Code:
    <script type="text/javascript"> 
    
    arr=[ 
    
    ["../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){ 
    document.bigpic.src=arr[n][0] 
    
    document.bigpic.onmouseover=function(){ 
    document.bigpic.src=arr[n][1] 
    } 
    
    document.bigpic.onmouseout=function(){ 
    document.bigpic.src=arr[n][0] 
    } 
    
    } 
    
    </script> 
    
    <div align="center"><img name="bigpic" src="../Gallery_Images/PhotoArt_Gallery/Swim_Kids_Before.jpg"></div>

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Well, that’s not hard, assuming that each image already has its own special container. Here’s an example 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.

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
    
        <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;
            }
        </style>
    
        <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 = \"\";\
                }");
              }
            };
        </script>
    
      </head>
      <body>
    
        <div>
          <div>
            <img alt="Article A" width="150" height="150" src="article_a.png"/>
          </div>
          <div>
            <img alt="Article B" width="150" height="150" src="article_b.png"/>
          </div>
          <div>
            <img alt="Article C" width="150" height="150" src="article_c.png"/>
          </div>
        </div>
    
      </body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    25
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you for taking the time to help me Arbitrator.
    It works perfect


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •