Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Getting dynamic element names

    Hi guys - total javascript noob here!

    I've got a PHP script that pulls some records from a MySQL database in a loop. They're images, so what I want to do is have a javascript onhover thing where a big image will display depending on which thumbnail you hover over. The code I'm using is as follows:

    Code:
    <!-- this bit goes between the head tags -->
    <script language="javascript" type="text/javascript">
    function showT(q) {document.getElementById('ima').setAttribute('src','../images/properties/'+q+'')}
    </script>
    
    <!-- this is my php loop -->
                  $strID=$propData['property_id'];
                  $imageRes=mysql_query("SELECT * FROM images WHERE property_id=$strID LIMIT 3");
                  $imageData=mysql_fetch_assoc($imageRes);
                  while ( is_array( $imageData ) ) 
                  { ?>	
    				<a href="#th" onmouseover="showT('../properties/<?php print $imageData['images'];?>')">
    				<img src="../images/properties/<?php print $imageData['images'];?>" height="75" width="75"/>
    				</a>
                  <?
                   $imageData = mysql_fetch_assoc( $imageRes );               
    			  } ?>
                 </td><td><img id="ima" src="../images/properties/placeholder.jpg" width="300" height="300"/></td></tr>
    Now this javascript does work, but of course it only displays the onhover behaviour in the first element, so if there are ten img id="ima"s on the page, hovering over their associated thumbnails only changes the img id="ima" at the top of the page.

    It would be useful if I could have the getElementByWhatever parameter accept anything from "ima01" upwards, that way I can just append $strID onto the end of the id name and make the unique identifier that way. Is there any way I can do this?

    Thanks in advance for any help

  • #2
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    @bothwell:

    Move the onmouseover to the img tag, and pass the src to the function:
    Code:
    <img src="abc.jpg" onmouseover="show(this.src)" width="75" height="75">
    I have complete code for this application, but, no need to post it now.

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Cranford - thanks, but I'm not sure what you mean. The image itself is changing without a problem, it's just that each onhover always loads its image into the first id="ima" on the page. I need to find a way to dynamically alter that id name in a way that javascript will be happy with.

  • #4
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    @bothwell:

    Id's must be unique. Element names, within a form, can be the same, but not Id's.

    You have the onmouseover call inside the anchor tag. The image tag is a child of the anchor tag.

    Code:
    <a href="#th" onmouseover="showT('../properties/<?php print $imageData['images'];?>')">
            <img src="../images/properties/<?php print $imageData['images'];?>" height="75" width="75"/>
    </a>

    This:
    Code:
    <img src="abc.jpg" onmouseover="show(this.src)" width="75" height="75">
    will pass abc.jpg to the show() function. I can't see a need for an Id.

    I think your approach is flawed. Id's cannot be the duplicated.

  • #5
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Cranford View Post
    @bothwell:

    Id's must be unique. Element names, within a form, can be the same, but not Id's.

    You have the onmouseover call inside the anchor tag. The image tag is a child of the anchor tag.

    This:
    Code:
    <img src="abc.jpg" onmouseover="show(this.src)" width="75" height="75">
    will pass abc.jpg to the show() function. I can't see a need for an Id.

    I think your approach is flawed. Id's cannot be the duplicated.
    Sorry, do please bear with me - I'm not joking when I saw I'm a total noob to this!

    I can remove the a href entirely because I don't really need it, to be honest. If I add this.src to my thumbnail image, the script behaves in exactly the same way - hovering over record#1's thumbnails displays the larger image in record#1's id=ima, hovering over record#2's thumbnails displays the larger image in record#1's id=ima. That's because, as you say, an ID by its nature is unique.

    I can make the id's within the HTML unique by appending an id number from the database onto them - id="ima83"; id="ima47"; etc - but I don't know how to have the javascript getElementById (or anything else) accept that as an arbitrary parameter. The reason I'm using IDs is so that each record has its own thumbnail>big image display.

    I've no doubt there's a better way to go about this, but I just don't have the experience to determine what it is.

  • #6
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    I have no idea what this: thumbnail>big image means.

    I have no idea what this: accept that as an arbitrary parameter. Arbitrary?

    You've posted three lines of HTML in a JavaScript forum. Now, you've decided that two of those lines are needed, after all.

    You can pass anything you want to the show() function, separated by commas:

    Code:
    <img src="abc.jpg" width="120" height="90" id="ima47t" show(this.src, this.id)>
    That will pass abc.jpg AND ima47t to the function. Then the function can strip the last character from that string, leaving ima47.

    Is "ima47" the ID of the div where the larger image for this this thumbnail is to appear?

    You haven't provided enough information. No one knows what the show() function is doing. You haven't even posted enough HTML for anyone to understand how the JavaScript is affecting, or is supposed to affect it.
    Last edited by Cranford; 01-28-2009 at 12:19 PM.

  • #7
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Cranford View Post
    I have no idea what this: thumbnail>big image means.

    I have no idea what this: accept that as an arbitrary parameter. Arbitrary?

    You've posted three lines of HTML in a JavaScript forum. Now, you've decided that two of those lines are needed, after all.

    You can pass anything you want to the show() function, separated by commas:

    Code:
    <img src="abc.jpg" width="120" height="90" id="ima47t" show(this.src, this.id)>
    That will pass abc.jpg AND ima47t to the function. Then the function can strip the last character from that string, leaving ima47.

    Is "ima47" the ID of the div where the larger image for this this thumbnail is to appear?

    You haven't provided enough information. No one knows what the show() function is doing. You haven't even posted enough HTML for anyone to understand how the JavaScript is affecting, or is supposed to affect it.
    All the HTML and javascript is in my first post - the initial function between the head tags is:

    Code:
    <!-- this bit goes between the head tags -->
    <script language="javascript" type="text/javascript">
    function showT(q) {document.getElementById('ima').setAttribute('src','../images/properties/'+q+'')}
    </script>
    The part of the HTML that calls this function is contained within a PHP loop (also in my first post):

    Code:
    <!-- this is my php loop -->
                  $strID=$propData['property_id'];
                  $imageRes=mysql_query("SELECT * FROM images WHERE property_id=$strID LIMIT 3");
                  $imageData=mysql_fetch_assoc($imageRes);
                  while ( is_array( $imageData ) ) 
                  { ?>	
    				<a href="#th" onmouseover="showT('../properties/<?php print $imageData['images'];?>')">
    				<img src="../images/properties/<?php print $imageData['images'];?>" height="75" width="75"/>
    				</a>
                  <?
                   $imageData = mysql_fetch_assoc( $imageRes );               
    			  } ?>
                 </td><td><img id="ima" src="../images/properties/placeholder.jpg" width="300" height="300"/></td></tr>
    The 'ima' div is where the larger image from a given thumbnail should appear, yes. The thumbnails are associated with a particular record taken from the database.

    What I mean by "arbitrary" is that I would like to append what will be an arbitrary number into the javascript. The javascript won't know which id number a record record has ahead of time because it's pulled from the database after the javascript is sent to the browser. As far as the javascript function is concerned, I'd like to have a way for this function:

    Code:
    function showT(q) {document.getElementById('ima')
    to accept a unique id comprising 'ima' and any appended digit (like a wildcard, so to speak).

    I appreciate your frustration and perhaps I could have phrased my question better, but the information was all there to start with.

  • #8
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    You can pass anything you want to the show() function, separated by commas:

    Code:
    <img src="abc.jpg" width="120" height="90" id="ima47t" show(this.src, this.id)>
    That will pass abc.jpg AND ima47t to the function. Then the function can strip the last character or characters from that string, leaving "ima"


    I still don't know what the heck is supposed to happen. Yes, a large image appears SOMEWHERE, SOMEHOW, but where and how, I have no clue.
    Last edited by Cranford; 01-28-2009 at 01:22 PM.

  • #9
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    Is this what you are trying to do?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    
    	function show(nSrc,nId){
    
    		document.getElementById(nId.replace(/t$/,"")).src = nSrc;
    	}	
    
    </script>
    <style type="text/css">
    
    	 body {background-color: #f5f5f5; margin-top: 60px;}
    	.imageHolder img {width: 300px; height: 200px;}
    	
    </style>
    </head>
    	<body>
    
    		<div class="imageHolder">
    			<img src="null" id="ima37">
    		</div>		
    
    		<img src="./images/Cleve1.jpg" id="ima37t" width="120" height="90" onmouseover="show(this.src, this.id)">
    
    
    		<div class="imageHolder">
    			<img src="null" id="ima21">
    		</div>		
    
    		<img src="./images/Cleve2.jpg" id="ima21t" width="120" height="90" onmouseover="show(this.src, this.id)">
    
    	</body>
    </html>


  •  

    Posting Permissions

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