PDA

View Full Version : How to implement the MouseOver in a .php page (HTML section of course)

Sven33
06-05-2007, 07:33 AM
Alright, first off, I have an osCommerce site. I have some basic perl/html experience...but I'm not too familiar with php.

What I'm looking to do is to have a different image appear when the user scrolls over each part of the menu bar. For example, the Home would be highlighted when the user scrolls over.

Here is the JavaScript I put in:
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="m11on.gif"
}
function mouseOut()
{
document.b1.src ="m11.gif"
}
</script>
</head>


Now, here is where I'm having problems...the HTML part. I cannot figure out how to properly call the functions. Here are the first two menu links...the first one I have added what I thought was needed, and the second one is what was originally there:

<table cellspacing=0 cellpadding=0>
<tr><td><a href=<?=tep_href_link('index.php')?>target=_blank><img src=images/m11.gif name=b1 width=144 height=37 border=0 onmouseover=mouseOver() onmouseout=mouseOut()></a><a href=<?=tep_href_link('products_new.php')?>><img src=images/m12.gif width=139 height=37 border=0></a>

All throughout the document there are no quotes (like width="144")...but since they are using a single quote to call on phplink, would I need it with javascript?

Any help would be greatly appreciated.

Thanks
Sven33
06-05-2007, 07:04 PM
I think we can disregard the whole php aspect since the part I'm editing is purely html.

Any advice?
glenngv
06-05-2007, 09:51 PM
function changeImg(imgId, imgSrc){
document.getElementById(imgId).src = imgSrc;
}
<a href="<?=tep_href_link('index.php')?>" target="_blank" onmouseover="changeImg('b1', 'm11on.gif')" onmouseout="changeImg('b1', 'm11.gif')"><img id="b1" src="images/m11.gif" width="144" height="37" border="0" alt="" /></a>
<a href="<?=tep_href_link('index2.php')?>" target="_blank" onmouseover="changeImg('b2', 'm12on.gif')" onmouseout="changeImg('b2', 'm12.gif')"><img id="b2" src="images/m11.gif" width="144" height="37" border="0" alt="" /></a>
Sven33
06-06-2007, 04:40 PM
Thanks Glenn, I will give that a shot.
Sven33
06-09-2007, 08:00 PM
Glenn,

Here is how I implemented your code into the header.php file:

<html>
<head>
<script type="text/javascript">
function changeImg(imgId, imgSrc){
document.getElementById(imgId).src = imgSrc;
</script>
</head>

Should I be assigning the id up here? Then there is a break with 75 lines of PHP....and then HTML resumes and here is where I put your first line of code in:
<table cellspacing=0 cellpadding=0>
<tr><td><a href="<?=tep_href_link('index.php')?>" target="_blank" onmouseover="changeImg('b1', 'm11on.gif')" onmouseout="changeImg('b1', 'm11.gif')"><img id="b1" src="images/m11.gif" width="144" height="37" border="0" alt="" /></a>

Yet nothing happens. There is no change in the image, and when I click on the image (to access the link) it actually opens up a new window.

Any ideas? Thanks
glenngv
06-09-2007, 09:46 PM
Make sure id is unique within the whole document. And the link opens in a new window because its target is "_blank". Remove it if you want the link to open in the same window.