"Simple" Javascript function in a PHP loop

[amandaNHT]

I need some help... I'm trying to make a thing for our website at work (I'm the web developer) but my javascript experience is limited... Any help would be greatly appreciated... I'm sure it's just something small I'm overlooking.

I'm trying to make a function that will change the image thumbnail when its parent div is hovered over and change it back when the hovering stops... I have to mix PHP and Javascript, which isn't really the issue since the PHP works before it gets to the server and just passes the values to the JavaScript stuff instead of the PHP code itself... So far I have this inside a PHP loop:

                <script type="text/javascript">
				function change<?php echo $x ?>Text(){
	var older<?php echo $platID ?>HTML = document.getElementById('image<?php echo $x ?>alt').innerHTML;
	var newer<?php echo $platID ?>HTML = '<img src="<?php echo("../gallery/plat/" . $row["name"] . "/" . $row["homeimg"]);?>" alt="<?php echo($row["name"]);?>">';
	document.getElementById('image<?php echo $platID ?>alt').innerHTML = newHTML;
				}
				</script>
                <script type="text/javascript">
				function revert<?php echo $x ?>Text(){
	var older<?php echo $platID ?>HTML = document.getElementById('image<?php echo $x ?>alt').innerHTML;
	var newer<?php echo $platID ?>HTML = '<img src="<?php echo("../gallery/plat/" . $row["name"] . "/" . $row["homelogo"]);?>" alt="<?php echo($row["name"]);?>">';
	document.getElementById('image<?php echo $platID ?>alt').innerHTML = newHTML;
				}
				</script>
    	<li class="comBox" onMouseOver="change<?php echo $x ?>Text" onMouseOut="revert<?php echo $x ?>Text">
    	<p class="platlogo"><a href="platpage.php?platID=<?php echo($row["platID"]); ?>" id="image<?php echo $x ?>alt"><img src="<?php echo("../gallery/plat/" . $row["name"] . "/" . $row["homelogo"]);?>" alt="<?php echo($row["name"]);?>"></a></p>
        <p class="location">(<a href="<?php echo($map[$row["platID"]]); ?>&output=embed" target="mapiframe">View in Map</a>)</p>
        <p class="platcity"><?php echo($row["city"]); ?>, WA</p>
        <p class="platprice"><?php $newrange = str_ireplace('$','',$row["pricerange"]); $newrange = str_ireplace('priced from ','Priced from the<br/>',$newrange); $newrange = str_ireplace('mid','Mid',$newrange); $newrange = str_ireplace('low','Lower',$newrange); $newrange = str_ireplace('upper','Upper',$newrange); $newrange = str_ireplace('00s','00\'s',$newrange); echo($newrange); ?></p>
        <p class="platleft"><?php include('countdown.php'); ?></p>
        </li>

Where $x is the counting variable. It gives me something like this for each item:

                <script type="text/javascript">
				function change5Text(){
	var older54HTML = document.getElementById('image5alt').innerHTML;
	var newer54HTML = '<img src="../gallery/plat/Sixty First Lofts/1540_102210_front01_edited_homeimg.jpg" alt="Sixty First Lofts">';
	document.getElementById('image54alt').innerHTML = newHTML;
				}
				</script>
                <script type="text/javascript">
				function revert5Text(){
	var older54HTML = document.getElementById('image5alt').innerHTML;
	var newer54HTML = '<img src="../gallery/plat/Sixty First Lofts/SixtyFirstLoftsLogo_home.png" alt="Sixty First Lofts">';
	document.getElementById('image54alt').innerHTML = newHTML;
				}
				</script>
    	<li class="comBox" onMouseOver="change5Text" onMouseOut="revert5Text">
    	<p class="platlogo"><a href="platpage.php?platID=71" id="image5alt"><img src="../gallery/plat/Sixty First Lofts/SixtyFirstLoftsLogo_home.png" alt="Sixty First Lofts"></a></p>
        <p class="location">(<a href="http://maps.google.com/maps/ms?hl=en&ie=UTF8&msa=0&msid=208682531008141126776.0004a1d6b77741a9da501&ll=47.671052,-122.356539&spn=0.024939,0.062871&t=p&z=15&iwloc=0004a1d7201e8b7904100&output=embed" target="mapiframe">View in Map</a>)</p>
        <p class="platcity">Seattle, WA</p>
        <p class="platprice">Priced from the<br/>Upper 300's</p>
        <p class="platleft">Only 3 left!</p>
        </li>

What I want to do is change the thumbnail image in the link when the parent div is moused over... Is it something simple I'm missing, or am I just really screwing it all up?

I'm also really pressed for time because my co-worker told the boss I was almost done... And I still have a lot of other stuff to do.

[WolfShade]

var older54HTML = document.getElementById('image5alt').innerHTML;
var newer54HTML = '<img src="../gallery/plat/Sixty First Lofts/1540_102210_front01_edited_homeimg.jpg" alt="Sixty First Lofts">';
document.getElementById('image54alt').innerHTML = newHTML;

The first line is setting older54HTML to the innerHTML of "image5alt"; should this be "image54alt"?
The last line is setting the innerHTML of 'image54alt' to newHTML, but I don't see where newHTML is being set.

[amandaNHT]

Ok, now I get this:

                <script type="text/javascript">
				function change5Text(){
	var older5HTML = document.getElementById('image5alt').innerHTML;
	var newer5HTML = '<img src="../gallery/plat/Sixty First Lofts/1540_102210_front01_edited_homeimg.jpg" alt="Sixty First Lofts">';
	document.getElementById('image5alt').innerHTML = newer5HTML;
				}
				</script>
                
                <script type="text/javascript">
				function revert5Text(){
	var older5HTML = document.getElementById('image5alt').innerHTML;
	var newer5HTML = '<img src="../gallery/plat/Sixty First Lofts/SixtyFirstLoftsLogo_home.png" alt="Sixty First Lofts">';
	document.getElementById('image5alt').innerHTML = newer5HTML;
				}
				</script>
                
    	<li class="comBox" onMouseOver="change5Text" onMouseOut="revert5Text">
    	<p class="platlogo"><a href="platpage.php?platID=71" id="image5alt"><img src="../gallery/plat/Sixty First Lofts/SixtyFirstLoftsLogo_home.png" alt="Sixty First Lofts"></a></p>
        <p class="location">(<a href="http://maps.google.com/maps/ms?hl=en&ie=UTF8&msa=0&msid=208682531008141126776.0004a1d6b77741a9da501&ll=47.671052,-122.356539&spn=0.024939,0.062871&t=p&z=15&iwloc=0004a1d7201e8b7904100&output=embed" target="mapiframe">View in Map</a>)</p>

        <p class="platcity">Seattle, WA</p>
        <p class="platprice">Priced from the<br/>Upper 300's</p>
        <p class="platleft">Only 3 left!</p>
        </li>

It's still not working yet, but progress is being made. That's a good thing.

(Thanks for the help, btw)

[amandaNHT]

Oh, and in case my last post was unclear, I do still need help figuring out what's still wrong with it. Thanks!

[amandaNHT]

Ok, so I simplified the structure of it a little, but it's still not working... Here's what I've got:

                <script type="text/javascript">
				function change2Text(){
	document.getElementById('image2alt').innerHTML = '<img src="../gallery/plat/Jefferson Heights/jeffersonLt4_homeImg.jpg" alt="Jefferson Heights">';
				}
				</script>
                
                <script type="text/javascript">
				function revert2Text(){
	document.getElementById('image2alt').innerHTML = '<img src="../gallery/plat/Jefferson Heights/JeffersonHeightsLogo_home.png" alt="Jefferson Heights">';
				}
				</script>
                
    	<li class="comBox" onMouseOver="change2Text" onMouseOut="revert2Text">
    	<p class="platlogo"><a href="platpage.php?platID=74" id="image2alt"><img src="../gallery/plat/Jefferson Heights/JeffersonHeightsLogo_home.png" alt="Jefferson Heights"></a></p>
        </li>

(This example is for #2 instead of #5, but the loop makes the code the same for all of them)

[amandaNHT]

I did some more research and I found the code for a function that'd just change the "src" thing in the img tag, which would be perfect, but I can't get that to work either.

Example:

                <script type="text/javascript">
				function change5Text(){
	document.getElementById('image5alt').src='../gallery/plat/Sixty First Lofts/1540_102210_front01_edited_homeimg.jpg';
				}
				</script>
                
                <script type="text/javascript">
				function revert5Text(){
	document.getElementById('image5alt').src='../gallery/plat/Sixty First Lofts/SixtyFirstLoftsLogo_home.png';
				}
				</script>
                
    	<li class="comBox" onMouseOver="change5Text" onMouseOut="revert5Text">
    	<p class="platlogo"><a href="platpage.php?platID=71"><img src="../gallery/plat/Sixty First Lofts/SixtyFirstLoftsLogo_home.png"  id="image5alt" alt="Sixty First Lofts"></a></p>
        </li>

[WolfShade]

I did all this typing before noticing that you don't have the events correct.

<li class="comBox" onMouseOver="change5Text();" onMouseOut="revert5Text();">

[amandaNHT]

YES! Thank you! OMG, it works perfectly now. Thanks so much!

[savvykms]

A suggestion, if I may:

var oldid = "";
var oldsrc = "";
function changeimg(id, src) {
oldid = id;
oldsrc = document.getElementById(id).src;
document.getElementById(id).src = src;
}
function revertimg() { document.getElementById(oldid).src = oldsrc; } 

<li class="comBox" onmouseover="changeimg('image5alt', '../gallery/plat/Sixty First Lofts/1540_102210_front01_edited_homeimg.jpg'')" onmouseout="revertimg()">
<p class="platlogo">
<a href="platpage.php?platID=71">
<img src="../gallery/plat/Sixty First Lofts/SixtyFirstLoftsLogo_home.png"  id="image5alt" alt="Sixty First Lofts">
</a>
</p>
</li>