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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Alternative to using multiple id's in one tag

    Hello,
    I am having trouble calling on two separate functions in the one <td> tag. If I could use two id 's in the one <td> tag it would work, but apparently there can only be one id per tag.

    The code doesn't have to be online friendly, I use the browser to organise notes using tables etc. My html knowledge is limited, I just take whatever I can from the web to suit my needs. So I don't necessarily understand the following code.

    Here is the short version:

    Code:
    <style>
    .special_cell_style1 {
    background-color:#0099ff;
    }
    
    .special_cell_style2 {
    background-color:#A80000;
    }
    
    .initial_cell_style {
    background-color:#282828;
    }
    </style>
    
    <!--So there is two highlight colors and one dark grey color which is the same as the background, although not mentioned-->
    
    <script>
    function highlight_cell1( cell )
    { document.getElementById( cell ).className='special_cell_style1';}
    
    function highlight_cell2( cell )
    { document.getElementById( cell ).className='special_cell_style2';}
    
    function unhighlight_cell( cell )
    { document.getElementById( cell ).className='.initial_cell_style';}
    </script>
    
    <!-- Three straight forward functions, each one calling upon corresponding styles-->
    
    <table>
    <tr>
    <td onmouseover="highlight_cell1( 'Firsteffect1'); highlight_cell2( 'Firsteffect2')" onmouseout="unhighlight_cell( 'Firsteffect1'); unhighlight_cell( 'Firsteffect2')"><img src="Firstpic.jpg"></td>
    
    <td onmouseover="highlight_cell1( 'Seceffect1'); highlight_cell2( 'Seceffect2')" onmouseout="unhighlight_cell( 'Seceffect1'); unhighlight_cell( 'Seceffect2')"><img src="Secpic.jpg"></td>
    
    <td onmouseover="highlight_cell1( 'Thirdeffect1'); highlight_cell2( 'Thirdeffect2')" onmouseout="unhighlight_cell( 'Thirdeffect1'); unhighlight_cell( 'Thirdeffect2')" id= 'Firsteffect2' id='Secondeffect1'><img src="Thirdpic.jpg"></td>
    </tr>
    
    <!--id's in the third cell, which purpose is to highlight the cell in two ways whether mousing over the first picture or the second picture-->
    
    </table>
    So as you can see in blue, the effect I want is when I hover over the firstpic it affects the third pic one way, but when I hover over the second pic it affects it another way. The grid of pics I have set up is much larger and each pic relates to different ones in different ways which leads to overlaps.
    With the current code only the first id is recognised.
    I have also tried to include both effects in the one id separated by ; or , .


    Other small issues with id's:
    I have played with it a bit and also notice that you cannot call the second function in the 'onmouseover', without calling the first one. Which I had to solve by changing the order of onmouseover and onmouseout.
    Also if I want to call on the same effect from say the firstpic more than once, I have to make another separate id call to the same function(e.g. onmouseover="highlight_cell1( 'Firsteffect1'); highlight_cell1( 'Firsteffect11);...), which I did.

    From searching the web I think the only solution is to change to whole method from id's to class's. The problem is that most of the content online is only the way I have done it.
    So I am wondering if someone could show me please how to convert my code
    to some sort of class method rather than using id's or if it cannot work, please let me know.

    Thankyou in advance.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    Well, with the code you provided you don’t need any IDs or JavaScript at all. If you just want to change the last cell on mouseover then CSS is all you need:
    Code:
    td:first-child:hover + td + td {background-color: red;}
    td:first-child + td:hover + td {background-color: green;}
    But if your set-up is more complex then you need to show a little more code for us to determine what’s the best approach.

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the response.
    There is exactly 101 pictures on the page that i'm dealing with. The purpose of having id's was that potentially 100 pics could be related to 1 single picture.

    So with with id calling i can have each picture calling for the 'firsteffect1' from the first picture and therefore when mousing over the first picture all the other 100 pics will light up a single colour. Or perhaps 50 of them will call firsteffect1 and the other 50 will call firsteffect2. Therefore when mousing over the first picture half of the remaining pics will light up one color and the other half another.

    This of course continues for the 2nd,3rd and 4th picture so that on mousing over the image, a number of other pictures will light up various colours depending on how they relate.

    But then with each pic relating to many other pics it then requires many id calls. But only one call can be done per tag.

    So if you imagine 101 of the following codes with different letters in place of ES :
    <td onmouseover="highprey( 'ESpred'); highpred( 'ESprey'); highsyn( 'ESsyn')" onmouseout="unhigh( 'ESpred'); unhigh( 'ESprey'); unhigh( 'ESsyn')"><img src="ES 1.jpg"></td>

    If any of remaining pictures has ES as their prey, they would call 'ESprey' which would call the highpred function. So when mousing over ES all the predators would light up.

    This works well when I complete a series of relationships to one pic and hover over. But when I do the same for another and have an id call from another pic that already has an id call, the relationships stop for that second pic at the image that has more than one id call.

    This does sound really confusing im sure. I would link you my page but its not online and the code as you can imagine is really long.
    I hope it made sense.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Do not use IDs for this. Use class.
    You can have more than one class with the same reference or attribute. Image 1 highlights and so does all images with a class of "one". Image two highlights all images with class="two" and so forth. An image can have class="one two" and it will highlight on image 1 hover and image 2 hover. Hope this makes sense to you.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,922
    Thanks
    15
    Thanked 229 Times in 229 Posts
    And don't forget about 'this' functionality. You can use it to greatly simplify your code.
    You can give all the cells their own id, or as sunfighter suggested use a className.
    You can also assign events and functions by looping through all the elements with a particular tag.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    One potential solution, without using 101 id settings.
    This one alters the class, but could just as easily use 2 different class names.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    <style type="text/css">
     .hoverPtr { height:50px; width:50px; }
     img { height:50px; width:35px; margin:auto; }
     th { height:105px; width:75px; }
    </style>
    
    </head>
    <body>
    <table border="1" id="tbl">
     <tr>
      <th class="hoverPtr" style="background-color:red"
           onmouseover="showImg(0)" onmouseout="hideImg(0)">
      </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/11.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/12.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/13.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/14.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/15.jpg'> </th>
     </tr>
     <tr>
      <th class="hoverPtr" style="background-color:orange"
           onmouseover="showImg(1)" onmouseout="hideImg(1)"> 
      </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/21.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/22.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/23.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/24.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/25.jpg'> </th>
     </tr>
     <tr>
      <th class="hoverPtr" style="background-color:yellow"
           onmouseover="showImg(2)" onmouseout="hideImg(2)"> 
      </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/31.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/32.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/33.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/34.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/35.jpg'> </th>
     </tr>
     <tr>
      <th class="hoverPtr" style="background-color:green"
           onmouseover="showImg(3)" onmouseout="hideImg(3)"> 
      </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/41.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/42.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/43.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/44.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/45.jpg'> </th>
     </tr>
     <tr>
      <th class="hoverPtr" style="background-color:blue"
           onmouseover="showImg(4)" onmouseout="hideImg(4)">
      </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/51.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/52.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/53.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/54.jpg'> </th>
      <th> <img src='http://www.nova.edu/hpd/otm/pics/4fun/55.jpg'> </th>
     </tr>
    </table>
    
    <div id="debug"></div>
    
    <script type="text/javascript">
    // Suggested for: http://www.codingforums.com/showthread.php?t=297341
    
     var ptrArray = [
        [0,1,2,3,4],       [0,5,10,15,20],    [4,8,12,16,20],    [4,9,14,19,24],    [6,8,12,16,18]
     ];
    
     function showImg(info) {
       var images = document.getElementById('tbl').getElementsByTagName('img');
       var sel = ptrArray[info].slice(0);  // alert(sel);
       for (var i=0; i<sel.length; i++) {
         images[sel[i]].style.height = "100px";
         images[sel[i]].style.width = "75px";
       }
       document.getElementById('debug').innerHTML = info+' | '+ptrArray[info].join(', ');
     }
    
     function hideImg(info) { document.getElementById('debug').innerHTML = ''; 
       var images = document.getElementById('tbl').getElementsByTagName('img');
       for (var i=0; i<images.length; i++) {
         images[i].style.height = "50px";
         images[i].style.width = "35px";
       }
       document.getElementById('debug').innerHTML = '';
     }
    </script>
    
    </body>
    </html>

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    You can also use the same name as many times as you wish. Unlike ids, names do not have to be unique.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    And unlike IDs, the name attribute is deprecated on all elements except form controls.

  • #9
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thankyou all for your help.
    And big thanks to jmrker for the code. I had a look at what it created and i'm sure if I play with the code I can make it suit my needs. The biggest thing was to find code I could use as I don't know too much myself.
    But if I play with what you have there I should be able to make sense of it.

    Thanks.

  • #10
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by slipperystace View Post
    Thankyou all for your help.
    And big thanks to jmrker for the code. I had a look at what it created and i'm sure if I play with the code I can make it suit my needs. The biggest thing was to find code I could use as I don't know too much myself.
    But if I play with what you have there I should be able to make sense of it.

    Thanks.
    You're most welcome.
    Happy to help.
    Post back with questions if you run into trouble with your changes.


  •  

    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
    •