Jump to content

Javascript rollover without the name attribute

MAGiK602

By MAGiK602
in HTML Help

 Share

Recommended Posts

MAGiK602 Newbie

MAGiK602

Posted
Posted

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

 

MAGiK602 Newbie

MAGiK602

Posted
  • Author
Posted

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

haku Regular Member

haku

Posted
Posted

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.

 

 

MAGiK602 Newbie

MAGiK602

Posted
  • Author
Posted

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.