Skip navigation
Currently Being Moderated

Javascript rollover image vallidation issue

Apr 30, 2013 5:24 AM

Tags: #image #javascript #cs6

Hi....again!

 

I am trying to add rollover images using CS6 however the code it places on my page won't vallidate and gives a heap of errors.

 

Can someone advise me how to attach the code to a seperate sheet so that my index page vallidates? or is there a way to hide the script so that the vallidation can't see it?

 

<!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=UTF-8" />

<meta name="description" content="Photography portfolio using both Nikon d3200 and canon ixus 65" />

<meta name="keywords" content="Portfolio,Pictures,Camera,Lenses,Photography,photo,informati ve,functional,evolving,expanding,pics,new,photographer,hobby,John,MacK innon,images,eye,catching,colourful,black,white

" />

<meta name="author" content="john mackinnon" />

<meta name="robots" content="index, follow" />

<meta name="revisit-after" content="3 month" />

<title>JMACPHOT.com Landing Page</title>

<!-- Photography, portfolio, personal -->

<link rel="shortcut icon" href="images/favicon.ico" />

<link href="css/layout.css" rel="stylesheet" type="text/css" />

 

<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 bgcolor="#000000" onload="MM_preloadImages('images/on.png','images/ps_on.png')">

<div align="center">

  <p><img src="images/landing.jpg" alt="landing" width="800" height="400" usemap="#Map" border="0" />

    <map name="Map" id="Map">

      <area shape="rect" coords="284,251,477,289" href="home.html" alt="#" />

    </map>

  </p>

  <p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('flash','','images/on.png',1)"><img src="images/off.png" width="190" height="100" id="flash" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('photoshop','','images/ps_on.png',1)"><img src="images/ps_off.png" width="190" height="100" id="photoshop" /></a></p>

</div>

 

</body>

</html>

 

Cheers

 

John

 
Replies
  • Currently Being Moderated
    Apr 30, 2013 6:06 AM   in reply to jmacphot1975

    I am not sure what 'flash' and 'photoshop' have in common with rollover images.

     

    May I suggest that you use jQuery to solve your problem.

     

    To do this, you need to link the library to your document as in

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

    The markup will look like

    <img src='/folder/image1.jpg' id='imageid'/>

    and the JS like

    <script>

    $('#imageid').hover(function() {
      $
    (this).attr('src', '/folder/image2.jpg');
    }, function() {
      $
    (this).attr('src', '/folder/image1.jpg');
    });

    </script>


     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2013 6:12 AM   in reply to jmacphot1975

    DW's javascript will do that from time to time.

     

    I typically move it to an external .js file when that happens so I can get the rest of the page to validate.

     

    EDIT: To move it out, copy and paste everything from between the <script> tags in the <head> into a new .js file. Then link to that file from the <head> like so...

     

    <script type="text/javascript" src="your_javascript.js"></script>

     

    Do not include the <script> tags in the actual .js file

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points