/    Sign up×
Community /Pin to ProfileBookmark

"Simple" Javascript function in a PHP loop

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>[/CODE]

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>[/CODE]

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.

to post a comment
JavaScript

8 Comments(s)

Copy linkTweet thisAlerts:
@WolfShadeJun 27.2011 — 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.
Copy linkTweet thisAlerts:
@amandaNHTauthorJun 27.2011 — Ok, now I get this:

[CODE] <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>[/CODE]


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

(Thanks for the help, btw)
Copy linkTweet thisAlerts:
@amandaNHTauthorJun 27.2011 — Oh, and in case my last post was unclear, I do still need help figuring out what's still wrong with it. Thanks! ?
Copy linkTweet thisAlerts:
@amandaNHTauthorJun 27.2011 — Ok, so I simplified the structure of it a little, but it's still not working... Here's what I've got:

[CODE] <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>[/CODE]


(This example is for #2 instead of #5, but the loop makes the code the same for all of them)
Copy linkTweet thisAlerts:
@amandaNHTauthorJun 27.2011 — 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:

[CODE] <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>
[/CODE]
Copy linkTweet thisAlerts:
@WolfShadeJun 27.2011 — I did all this typing before noticing that you don't have the events correct.

<li class="comBox" onMouseOver="change5Text[COLOR="red"]();[/COLOR]" onMouseOut="revert5Text[COLOR="red"]();[/COLOR]">
Copy linkTweet thisAlerts:
@amandaNHTauthorJun 27.2011 — YES! Thank you! OMG, it works perfectly now. Thanks so much! ?
Copy linkTweet thisAlerts:
@savvykmsJun 27.2011 — A suggestion, if I may:
[code=php]
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; }
[/code]

[code=html]
<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>
[/code]
×

Success!

Help @amandaNHT spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...