[jamie1221]

This one is probably really simple, but has been racking my brain to ruins for a few days now. I have a php script that outputs images, and on each out-putted image, when the user hovers over it an element shows with info & options. However i can only seem to work out how to get each element by it's id, which doesn't work, only allowing the first outputted image to show it's rollover, also Id's should be unique so this way is useless. I then did it by getting the elements classes in Jquery by then i had the another problem, every time i hovered the image ALL of the hidden elements where shown, so a mouse over on image one was showing the options for images 1,2,3,4,5,6,7,8.... Grrrr!

This is the original Javascript i used:

function thumbToggle() {
        var opt = document.getElementById("rem");
        var text = document.getElementsByTagName("thumbrem");
            if(opt.style.display == "block") {
                opt.style.display = "none";
                text.innerHTML = "⇓";
            }
            else {
                opt.style.display = "block";
                text.innerHTML = "⇑";
        }
    }

Pretty simple really, but so is my knowledge of JS. So the Js Didn't work for me, nor did the Jquery. Only idea i have to sort this, is to add an ID and then concatenate an incremented number after it, thus making each ID unique, then doing the same thing to the ID's in the HTML, making the Id's match.

Only problem is i have no clue how to do it, i have no clue if that would really work and i think it's time i put my hands up and admit i need some help.

Here is the piece of HTML the php outputs for each of the images....

<div style='position:relative; display:inline; width:200px; overflow:hidden;'>
    <div style='position:relative;'>
        
<a  class='thumbrem' style='position:relative;' href=\"show-image.php?id=$id\">
						<img class='lifted drop-shadow' src=\"thumb.php?id=$id\">
						<a href='#'><thumbrem onmouseover='thumbToggle();' style='position:absolute; right:3px; top:-35px;' class='blk-body-button'>&uArr;</thumbrem></a>
				</a>";

// The element that appears on rollover

<div id='rem' class='rem'>          
     <div style='padding-bottom:5px;'>
      <label style='color:#fff;'>Select:</label>
         <form method=\"POST\" action='myimages.php'>
           <input type='checkbox' name='images[]' value='$id'>&nbsp;&nbsp;
         </form>                    
 </div>

     <div style='color:#fff;'>
      <a href=\"myimages.php?id=$id&act=delete\">Delete</a>
             &nbsp;|&nbsp;
          <a class='' href=\"myimages.php?id=$id&act=changetags\">Edit Tags</a>
     </div>

 <div style='color:#fff; padding-bottom:3px;'>Size:{$details[$i]}</div>
 <div style='color:#fff padding-bottom:3px;'>Date:  {$date[$i]}</div>
 <div style='color:#fff'>Views:  {$views[$i]}</div>

    </div>          
</div>

Cheers guys and girls for reading. And thanks for any help in advance.

[Dormilich]

firstly, <thumbrem> is not a valid HTML element.
secondly, a NodeList (from document.getElementsByTagName()) does not have an innerHTML property.
thirdly, for each informational div there needs to be a unique correlation to its image (and vice versa).