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
  • 206 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by AffineMesh

Dani AI

Generated

— the root cause is that the image and the overlay text were separate clickable elements. When the text sits outside the same <a> the browser won’t treat it as part of the link, and your JavaScript was trying to reach a non‑existent .a property and using firstChild (which can be a text node). ’s CSS-only approach is the cleanest fix, but here are two practical alternatives that keep the whole button clickable and make hover color changes reliable.

Wrap both the image and the label in one anchor and use CSS for the hover color (no JS needed):

<a class="btn" href="industry.php">
  <img src="graphics/industry_button.jpg" alt="Industry" width="133" height="30">
  <span class="label">Industry</span>
</a>

<style>
a.btn { position:relative; display:inline-block; width:133px; height:30px; text-decoration:none; }
a.btn img { display:block; width:100%; height:100%; }
a.btn .label { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#066; font-size:14px; }
a.btn:hover .label { color:red; }
</style>

If you prefer JavaScript, toggle a CSS class instead of manipulating .style on uncertain DOM references. Avoid firstChild.a — use querySelector or firstElementChild:

var btn = document.getElementById('home_button');
var link = btn.querySelector('a');

btn.addEventListener('mouseenter', function(){ link.classList.add('hover'); });
btn.addEventListener('mouseleave', function(){ link.classList.remove('hover'); });
/* CSS: #home_button a { color:#fff } #home_button a.hover { color:#ff0000 } */

Quick troubleshooting notes: never nest anchors, inspect the DOM with browser devtools to see whether firstChild is a text node, and prefer addEventListener + classList for maintainability. was right to call out formatting problems when pasting code; use proper code blocks when posting. ’s BBCode tip is useful for future posts.

Recommended Answers

All 4 Replies

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.