MAGiK602 Posted March 12, 2008 Share Posted March 12, 2008 I want to know if/how it is possible to make a javascript rollover without the "name" attribute. e.g. <img src="blahblah.jpg" alt="lol" name="lol" /> This is due to the "name" attribute not being valid XHTML strict 1.0. My rollover.js code is: function imageOn(imageName) { if (document.images) { currentImage = document.images[imageName]; currentImage.src = "./images/navigation/" + imageName + "2.jpg"; } } function imageOff(imageName) { if (document.images) { currentImage = document.images[imageName] currentImage.src = "./images/navigation/"+ imageName + ".jpg"; } } My index.htm code is: <!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" lang="en" xml:lang="en"> <head> <link rel="stylesheet" href="./stylesheet.css" /> <script type="text/javascript" src="./rollover.js"></script> <script type="text/javascript" src="./scrollercontent.js"></script> <script type="text/javascript" src="./scroller.js"></script> <title>Dark Motives Design - Index</title> </head> <body> <div id="container"> <!-- Start Banner --> <div id="banner"> <img src="images/banner.jpg" alt="Banner" /> </div> <!-- End Banner --> <!-- Start Navigation --> <div id="navigation"> <ol> <li> <a href="index.php" onmouseover="imageOn('index')" onmouseout="imageOff('index')" > <img src="./images/navigation/index.jpg" alt="index" name="index" /></a> </li> <li> <a href="about_us.php" onmouseover="imageOn('about_us')" onmouseout="imageOff('about_us')" > <img src="./images/navigation/about_us.jpg" alt="about_us" name="about_us" /></a> </li> <li> <a href="portfolio.php" onmouseover="imageOn('portfolio')" onmouseout="imageOff('portfolio')" > <img src="./images/navigation/portfolio.jpg" alt="portfolio" name="portfolio" /></a> </li> <li> <a href="designs.php" onmouseover="imageOn('designs')" onmouseout="imageOff('designs')" > <img src="./images/navigation/designs.jpg" alt="designs" name="designs" /></a> </li> <li> <a href="contact_us.php" onmouseover="imageOn('contact_us')" onmouseout="imageOff('contact_us')" > <img src="./images/navigation/contact_us.jpg" alt="contact_us" name="contact_us" /></a> </li> </ol> </div> <img src="./images/undernav.jpg" alt="Under Navigation" /> <!-- End Navigation --> <!-- START LEFT SIDE CONTENT --> <div id="left_side"> <img src="images/latest_news.jpg" alt="latest news" /> <div id="latestnews"> <p>lol</p> <img src="images/bottom_box2.jpg" alt="Bottom Box" /> </div> <img src="images/extras.jpg" alt="Extras" /> <div id="extras"> <p>lol</p> <img src="images/bottom_box2.jpg" alt="Bottom Box" /> </div> <img src="images/login.jpg" alt="login" /> <div id="login"> <form action="./admin/index.php" method="post"> <p><input name="username" type="text" class="form" value="username" /></p> <p><input name="password" type="password" class="form" /></p> <p><input name="submit" type="button" value="Login" class="button" /></p> </form> <img src="images/bottom_box2.jpg" alt="Bottom Box" /> </div> </div> <!-- STOP LEFT SIDE CONTENT --> <!-- START MAIN CONTENT --> <div id="main"> <h1>NEWSHERE</h1> <p>lol</p> <img src="images/bottom_box.jpg" alt="Bottom Box" /> </div> <div id="copyright"> Dark Motives Design © 2008 - <a href="http://www.dark-motives.com/design/index.php">www.dark-motives.com/design/</a> </div> </div> </body> </html> Thanks in advanced! -Magik Quote Link to comment Share on other sites More sharing options...
MAGiK602 Posted March 12, 2008 Author Share Posted March 12, 2008 I want to know if/how it is possible to make a javascript rollover without the "name" attribute. e.g. <img src="blahblah.jpg" alt="lol" name="lol" /> This is due to the "name" attribute not being valid XHTML strict 1.0. My rollover.js code is: function imageOn(imageName) { if (document.images) { currentImage = document.images[imageName]; currentImage.src = "./images/navigation/" + imageName + "2.jpg"; } } function imageOff(imageName) { if (document.images) { currentImage = document.images[imageName] currentImage.src = "./images/navigation/"+ imageName + ".jpg"; } } My index.htm code is: <!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" lang="en" xml:lang="en"> <head> <link rel="stylesheet" href="./stylesheet.css" /> <script type="text/javascript" src="./rollover.js"></script> <script type="text/javascript" src="./scrollercontent.js"></script> <script type="text/javascript" src="./scroller.js"></script> <title>Dark Motives Design - Index</title> </head> <body> <div id="container"> <!-- Start Banner --> <div id="banner"> <img src="images/banner.jpg" alt="Banner" /> </div> <!-- End Banner --> <!-- Start Navigation --> <div id="navigation"> <ol> <li> <a href="index.php" onmouseover="imageOn('index')" onmouseout="imageOff('index')" > <img src="./images/navigation/index.jpg" alt="index" name="index" /></a> </li> <li> <a href="about_us.php" onmouseover="imageOn('about_us')" onmouseout="imageOff('about_us')" > <img src="./images/navigation/about_us.jpg" alt="about_us" name="about_us" /></a> </li> <li> <a href="portfolio.php" onmouseover="imageOn('portfolio')" onmouseout="imageOff('portfolio')" > <img src="./images/navigation/portfolio.jpg" alt="portfolio" name="portfolio" /></a> </li> <li> <a href="designs.php" onmouseover="imageOn('designs')" onmouseout="imageOff('designs')" > <img src="./images/navigation/designs.jpg" alt="designs" name="designs" /></a> </li> <li> <a href="contact_us.php" onmouseover="imageOn('contact_us')" onmouseout="imageOff('contact_us')" > <img src="./images/navigation/contact_us.jpg" alt="contact_us" name="contact_us" /></a> </li> </ol> </div> <img src="./images/undernav.jpg" alt="Under Navigation" /> <!-- End Navigation --> <!-- START LEFT SIDE CONTENT --> <div id="left_side"> <img src="images/latest_news.jpg" alt="latest news" /> <div id="latestnews"> <p>lol</p> <img src="images/bottom_box2.jpg" alt="Bottom Box" /> </div> <img src="images/extras.jpg" alt="Extras" /> <div id="extras"> <p>lol</p> <img src="images/bottom_box2.jpg" alt="Bottom Box" /> </div> <img src="images/login.jpg" alt="login" /> <div id="login"> <form action="./admin/index.php" method="post"> <p><input name="username" type="text" class="form" value="username" /></p> <p><input name="password" type="password" class="form" /></p> <p><input name="submit" type="button" value="Login" class="button" /></p> </form> <img src="images/bottom_box2.jpg" alt="Bottom Box" /> </div> </div> <!-- STOP LEFT SIDE CONTENT --> <!-- START MAIN CONTENT --> <div id="main"> <h1>NEWSHERE</h1> <p>lol</p> <img src="images/bottom_box.jpg" alt="Bottom Box" /> </div> <div id="copyright"> Dark Motives Design © 2008 - <a href="http://www.dark-motives.com/design/index.php">www.dark-motives.com/design/</a> </div> </div> </body> </html> Thanks in advanced! -Magik Quote Link to comment Share on other sites More sharing options...
haku Posted March 12, 2008 Share Posted March 12, 2008 Javascript rollovers are unnecessary in these days of CSS. People can turn off Javascript, and sometimes do. People can turn off CSS if they know how, but no one ever does as it doesn't pose a security risk. Use this in your html: <a href="someURL" id="someID" >text to be replaced</a> Then put this in the head of your document: <style type="text/css"> #someID { background-image: url(path/to/image.jpg); //put the url to your 'off' image here height: ___px; // set this to the height of the image width: ___px; // set this to the width of the image text-indent: -9999px; //this will get rid of whatever text you put between <a> and </a> } #someID:hover { background-image: url(path/to/image2.jpg); //put the URL to your rollover image here } </style> This will work with no javascript, requires less code, and needs no name attribute. Quote Link to comment Share on other sites More sharing options...
MAGiK602 Posted March 12, 2008 Author Share Posted March 12, 2008 the page is now: <!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" lang="en" xml:lang="en"> <head> <link rel="stylesheet" href="./stylesheet.css" /> <script type="text/javascript" src="./scrollercontent.js"></script> <script type="text/javascript" src="./scroller.js"></script> <title>Dark Motives Design - Index</title> </head> <body> <div id="container"> <!-- Start Banner --> <div id="banner"> <img src="images/banner.jpg" alt="Banner" /> </div> <!-- End Banner --> <!-- Start Navigation --> <div id="navigation"> <a href="index.php" id="navindex"></a> <a href="about_us.php" id="navabout_us"></a> <a href="portfolio.php" id="navportfolio"></a> <a href="designs.php" id="navdesigns"></a> <a href="contact_us.php" id="navcontact_us"></a> </div> <img src="./images/undernav.jpg" alt="Under Navigation" /> <!-- End Navigation --> <!-- START LEFT SIDE CONTENT --> <div id="left_side"> <img src="images/latest_news.jpg" alt="latest news" /> <div id="latestnews"> <p>testtt</p> <img src="images/bottom_box2.jpg" alt="Bottom Box" /> </div> <img src="images/extras.jpg" alt="Extras" /> <div id="extras"> <p>testtt</p> <img src="images/bottom_box2.jpg" alt="Bottom Box" /> </div> <img src="images/login.jpg" alt="login" /> <div id="login"> <form action="./admin/index.php" method="post"> <p><input name="username" type="text" class="form" value="Username" /></p> <p><input name="password" type="password" class="form" /></p> <p><input name="submit" type="button" value="Login" class="button" /></p> </form> <p id="etc"><span><a href="#">Retrieve Password</a></span><a href="#">Register<a/></p> <img src="images/bottom_box2.jpg" alt="Bottom Box" /> </div> </div> <!-- STOP LEFT SIDE CONTENT --> <!-- START MAIN CONTENT --> <div id="main"> <h1>NEWSHERE</h1> <p>lol</p> <img src="images/bottom_box.jpg" alt="Bottom Box" /> </div> <div id="copyright"> Dark Motives Design © 2008 - www.dark-motives.com/design/ </div> </div> </body> </html> and the stylesheet is: #navindex { background-image:url(./images/navigation/index.jpg); height: 30px; width: 128px; text-indent: -9999px; } #navindex:hover { background-image: url(./images/navigation/index2.jpg); } #navabout_us { background-image: url(./images/navigation/about_us.jpg); height: 30px; width: 120px; text-indent: -9999px; } #navabout_us:hover { background-image: url(./images/navigation/about_us2.jpg); } #navportfolio { background-image: url(./images/navigation/portfolio.jpg); height: 10px; width: 120px; text-indent: -9999px; } #navportfolio:hover { background-image: url(./images/navigation/portfolio2.jpg); } #navdesigns { background-image: url(./images/navigation/designs.jpg); height: 30px; width: 100px; text-indent: -9999px; } #navdesigns:hover { background-image: url(./images/navigation/designs2.jpg); } #navcontact_us { background-image:url(images/navigation/contact_us.jpg); //put the url to your 'off' image here height: 30px; // set this to the height of the image width: 188px; // set this to the width of the image text-indent: -9999px; //this will get rid of whatever text you put between <a> and </a> } #navcontact_us:hover { background-image: url(./images/navigation/contact_us.jpg); //put the URL to your rollover image here } It doesn't work, the text isn't replaced and the images arn't filling to the correct size Quote Link to comment Share on other sites More sharing options...
haku Posted March 12, 2008 Share Posted March 12, 2008 This: <link rel="stylesheet" href="./stylesheet.css" /> shoudl be this: <link rel="stylesheet" type="text/css" href="./stylesheet.css" /> If that doesn't work, post a link and I'll check it out live. Quote Link to comment Share on other sites More sharing options...
MAGiK602 Posted March 12, 2008 Author Share Posted March 12, 2008 nvm, i fixed my problem with adding "display: block" Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.