www.webdeveloper.com
Results 1 to 9 of 9

Thread: "Simple" Javascript function in a PHP loop

  1. #1
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    266

    Exclamation "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>
    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.

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    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.

  3. #3
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    266
    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>
    It's still not working yet, but progress is being made. That's a good thing.

    (Thanks for the help, btw)

  4. #4
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    266
    Oh, and in case my last post was unclear, I do still need help figuring out what's still wrong with it. Thanks!

  5. #5
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    266
    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>
    (This example is for #2 instead of #5, but the loop makes the code the same for all of them)

  6. #6
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    266
    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>

  7. #7
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    I did all this typing before noticing that you don't have the events correct.

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

  8. #8
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    266
    YES! Thank you! OMG, it works perfectly now. Thanks so much!

  9. #9
    Join Date
    Oct 2007
    Location
    Western Massachusetts, USA
    Posts
    387
    A suggestion, if I may:
    PHP Code:
    var oldid "";
    var 
    oldsrc "";
    function 
    changeimg(idsrc) {
    oldid id;
    oldsrc document.getElementById(id).src;
    document.getElementById(id).src src;
    }
    function 
    revertimg() { document.getElementById(oldid).src oldsrc; } 
    HTML Code:
    <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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles