1 Replies - 1004 Views - Last Post: 04 June 2012 - 11:01 AM

#1 jamie1221   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 16-February 12

Cant work out how to get a roll over to work on multiple elements

Posted 04 June 2012 - 10:40 AM

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>

// 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;

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

 <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>


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

Is This A Good Question/Topic? 0
  • +

Replies To: Cant work out how to get a roll over to work on multiple elements

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4192
  • View blog
  • Posts: 13,244
  • Joined: 08-June 10

Re: Cant work out how to get a roll over to work on multiple elements

Posted 04 June 2012 - 11:01 AM

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).
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1