Member Avatar for GeoffC

Example 1

The button is a blob of colour (.jpg) with text over the top. I want two things to happen: first, when the cursor is rolled over the .jpg and then the text, I want the text to change colour. This works ok.
Second, I want to link to industry.php when clicked. This works ok over the .jpg but, obviously, not over the text.

echo '<div id="industry_button"><a href="industry.php" onmouseover="Roll_Industry(true)" onmouseout="Roll_Industry(false)">
        			<img name="Industry" src="graphics/industry_button.jpg" width="133" height="30" /></a>
            		<div class="text"  onmouseover="Roll_Industry(true)" onmouseout="Roll_Industry(false)">Industry</div>
        		  </div>';
#industry_button
{
	position:relative;
	top:60px;
	left:-100px;
	float:left;
	font-size:14px;
	color: #066;
}

#industry_button .text
{
	position:absolute;
	top:7px;
	left:10px;
	float:left;
	cursor:pointer;
}
function Roll_Industry(mouse)
{
	if (mouse == true)
	{
		document.getElementById("industry_button").style.color="red";
	}
	else
	{
		document.getElementById("industry_button").style.color= "#066";
	}
}

Example 2

Similar to Example 1 with <a> tag around the text. The linking is now ok but the colour change does not occur when the cursor is over the .jpg It does change colour when the cursor is over the text.
I suspect that my problem lies with the Javascript. The alert's show that the javascript is being executed.

echo '<div id="home_button"><a href="index.php" onmouseover="Roll_Home(true)" onmouseout="Roll_Home(false)">
        			<img name="home" src="graphics/home_button.jpg" width="65" height="30" /></a>
            	  	<div class="text" ><a href="index.php" onmouseover="Roll_Home(true)" onmouseout="Roll_Home(false)"> Home</a>
					</div>
        		  </div>';
#home_button 
{
	position:relative;
	top:60px;
	left:-120px;
	float:left;
	font-size:14px;
}

#home_button .text
{
	position:absolute;
	top:7px;
	left:10px;
	float:left;
	cursor:pointer;
}

#home_button .text a 
{
	color:#fff;
}

#home_button .text a:hover 
{
	color:#ff0000;
}
function Roll_Home(mouse)
{
	if (mouse == true)
	{
		alert("foo");
		elem1 = document.getElementById("home_button");
		elem1.firstChild.a.style.color="red";
	}
	else
	{
		alert("foo1");
		document.getElementById("home_button").a.style.color= "#fff";
	}
}
  • 4 Contributors
  • 4 Replies
  • 188 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by AffineMesh
Member Avatar for jakizak

Not sure about this, very hard to read the code without syntax.

However, it appears that "Mouse" has not been declared anywhere, yet it is being used within functions. You need to 1) use correct syntax when placing code on here (Just use [ CODE ] and [ /CODE ] (Without spaces). and 2) simplify what it is you want to achieve as I got lost about 5 lines down!

Cheers
Jack

Edited by jakizak because: incorrectly inputted
Member Avatar for LaxLoafer

Geoff,

What I believe you're attempting to do is usually best done without the use of JavaScript.

Using style sheets it's possible to assign a background image to an 'a' element. You can also specify the color of the link when a mouse hovers over with the :hover CSS Pseudo class...

This should work on all modern browsers.

Have a look at the following example. Let us know if it doesn't match what you're hoping to achieve.

<html>
<head>
<title></title>
<style type="text/css">
a.button {
	background: url(graphics/industry_button.jpg);
	display: block;
	width: 133px;
	height: 30px;
	color: Red;
}

a.button:hover {
	color: #066;
}
</style>
</head>
<body>
	<a class="button" href="industry.php">Industry</a>
</body>
</html>
Edited by LaxLoafer because: n/a
Member Avatar for GeoffC

Thanks Jack and LaxLoafer. Lax - your solution worked great. Jack - is the problem with my code-tags the =PHP etc or the spaces or do they have to be upper case?
With the javascript, isn't "mouse" defined as the parameter to the function Roll_home? Does it need some further definition?
thanks again.

Edited by mike_2000_17 because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.