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:
[CODE] <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:
[CODE] <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.