function switchImage() Is this obsolete?

Discussion in 'JavaScript' started by Mitchell, Mar 25, 2009.

0
  1. #1
    I am trying to learn JavaScript. I have 4 books. The oldest book (2003) I am reading at the moment is teaching me functions. I wrote out the code as shown in the book, but it doesn't work. Is it possible some of this is obsolete and will not work in Firefox? I know there are other ways to accomplish the same goal, but I am currently learning to create functions from this book. Can you spot what I am doing wrong? Thanks.

    <!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">

    <html>
    <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>square</title>

    <script type="text/javascript">
    function switchImage(){
    ducument.squarepic.src="circle.jpg"

    }


    function restoreImage(){
    document.squarepic.src="square.jpg"

    }
    </script>
    </head>

    <body>

    <p>text text text text text text <img src="square.jpg"
    alt="square" width="200" height="150" id="squarepic" /> text text
    text text text text text.</p>
    <p><a href="facts.html" onmouseover="switchImage()"
    onmouseout="restoreImage()">text text text text text text text</a></p>

    </body>
    </html>
     
    Mitchell, Mar 25, 2009 IP
  2. GreatMetro

    GreatMetro Peon

    Messages:
    117
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    First off,
    you've got some issues in your header (html declared twice) and you mistyped document in your switchImage function.

    copy and paste this:

    <!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-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<title>square</title>

<script type="text/javascript">
function switchImage(){
document.squarepic.src="circle.jpg";

}


function restoreImage(){
document.squarepic.src="square.jpg";

}
</script>

</head>
<body>

<p>text text text text text text <img src="square.jpg"
alt="square" width="200" height="150" id="squarepic" /> text text
text text text text text.</p>
<p><a href="facts.html" onmouseover="switchImage()"
onmouseout="restoreImage()">text text text text text text text</a></p>

</body>
</html>
    Code (markup):
     
    GreatMetro, Mar 25, 2009 IP
  3. nishithkant

    nishithkant Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    use rollover image option if U r using dreamviewer editor.it is inside"insert" option
    or if any other or simple notepad

    for example
    <script>
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
    }

    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[n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    <tr>
    <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('imagename','','path',1)"><img src="iactual image" alt="Subcategory" name="subcat" width="172" height="22" border="0" id="subcat" /></a></td>
    </tr>
     
    nishithkant, Mar 25, 2009 IP
  4. GreatMetro

    GreatMetro Peon

    Messages:
    117
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    That appears to be a copy of Dreamweaver's image swap function. If he's trying to learn javascript it's best if he writes his own simple image swap function and goes from there... IMHO...
     
    GreatMetro, Mar 25, 2009 IP
  5. nishithkant

    nishithkant Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    ya exactlly .I was not aware Mitshell is in learning stage
     
    nishithkant, Mar 25, 2009 IP
  6. Mitchell

    Mitchell Peon

    Messages:
    204
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks for your reply's. I am not using dream weaver, I am hand writing this. Thanks for pointing out the typo. I don't understand the (html declared twice). I am new at website coding, but I will look into it. I will need a moment to digest what some of you are saying.
     
    Mitchell, Mar 25, 2009 IP
  7. Mitchell

    Mitchell Peon

    Messages:
    204
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Fixing ducument to document did the trick. Thanks. Also I will look into nishithkant's suggestion.
     
    Mitchell, Mar 25, 2009 IP
  8. GreatMetro

    GreatMetro Peon

    Messages:
    117
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8
    In your example you have two HTML tags...
     
    GreatMetro, Mar 25, 2009 IP
  9. Mitchell

    Mitchell Peon

    Messages:
    204
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Thanks. I have been following xhtml tutorials the last couple of months. I just copy and paste that info. I am going to have to study up on proper xhtml tag usage.
     
    Mitchell, Mar 25, 2009 IP