Javascript Images onclick

Question

Designing a page with dozens of images that can be chosen by the end-user. Trying to use the events (onclick, onmouseover and onmouseout) to make it graphically pleasing. Since each event will change several div tags, I decided to use Javascript instead of CSS.

In order to keep the onmouseout from affecting a clicked images border, I assigned a variable 'imgClicked'. Problem is that same variable changes for every picture clicked. Is there a way to assign the variable for each box so each image knows whether its been clicked or not. Or perhaps a better route to take?

Thanks in advance!

  var borderColorOver = "#26d314";
  var borderColorOff = "#7DAFE7";
  var borderColorOn = "#d40101";
  var imgClicked = 0;

  function heartMouseClick(a) {
    var heartImg = a;
    if (imgClicked < 1) {
      var images = document.getElementsByClassName('images');
      images[heartImg].style.borderColor = borderColorOn;
      var subject = document.getElementsByClassName('subject');
      subject[heartImg].style.borderColor = borderColorOn;
      imgClicked = 1;
    } else {
      var images = document.getElementsByClassName('images');
      images[heartImg].style.borderColor = borderColorOff;
      var subject = document.getElementsByClassName('subject');
      subject[heartImg].style.borderColor = borderColorOff;
      imgClicked = 0;
    }
  }

  function heartMouseOver(a) {
    var heartImg = a;
    if (imgClicked < 1) {
      var images = document.getElementsByClassName('images');
      images[heartImg].style.borderColor = borderColorOver;
      var subject = document.getElementsByClassName('subject');
      subject[heartImg].style.borderColor = borderColorOver;
    }
  }

  function heartMouseOut(a) {
    var heartImg = a;
    if (imgClicked < 1) {
      var images = document.getElementsByClassName('images');
      images[heartImg].style.borderColor = borderColorOff;
      var subject = document.getElementsByClassName('subject');
      subject[heartImg].style.borderColor = borderColorOff;
    }
  }

.pictureBox {
  width: 300px;
  height: 300px;
  border-style: solid;
  border-width: 0px;
}
.images {
  width: 300px;
  height: 200px;
}
.subject {
  width: 300px;
  height: 100px;
  border: 5px solid #FFBE00;
}

<body>

  <div class="pictureBox">
    <div class="picture">
      <img onmouseover="heartMouseOver(0)" onmouseout="heartMouseOut(0)" onclick="heartMouseClick(0)" class="images" border="5" src="photo-1.jpg">
    </div>
    <div class="subject" border="5">
      Image 0 Description
    </div>
  </div>
  <div class="pictureBox">
    <div>
      <img onmouseover="heartMouseOver(1)" onmouseout="heartMouseOut(1)" onclick="heartMouseClick(1)" class="images" border="5" src="photo-2.jpg">
    </div>
    <div class="subject" border="5">
      Image 1 Description
    </div>
  </div>
  <div class="pictureBox">
    <div>
      <img onmouseover="heartMouseOver(2)" onmouseout="heartMouseOut(2)" onclick="heartMouseClick(2)" class="images" border="5" src="photo-3.jpg">
    </div>
    <div class="subject" border="5">
      Image 2 Description
    </div>
  </div>

</body>

I'm confused to why you have 3 function doing more or less the same thing. Why not just have all the events call the same function? — NewToJS
– NewToJS, Commented Aug 26, 2016 at 17:14

BoundForGlory · Accepted Answer · 2016-08-26 17:32:45Z

I've modified your code some. I added id's to the dom elements and pass in the id to all methods instead of hardcoding them. Here's the new code in its entirety :

        <!doctype html>
        <html>
        <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>

        <style type="text/css">    
        .pictureBox {
            width: 300px;
            height: 300px;
            border-style: solid;
            border-width: 0px;
        }    
        .images {
            width: 300px;
            height: 200px;
        }    
        .subject {
            width: 300px;
            height: 100px;
            border: 5px solid #FFBE00;
        }    
        </style>

        </head>

        <script>    
        var borderColorOver = "#26d314"; 
        var borderColorOff = "#7DAFE7";
        var borderColorOn = "#d40101";
        var imgClicked = 0;

        function heartMouseClick(a) {

            if (imgClicked < 1) {
                var images = document.getElementById(a);
                    images.style.borderColor = borderColorOn;
                var subject = document.getElementById('s'+a);
                    subject.style.borderColor = borderColorOn;
                imgClicked = 1;
            } else {
                var images = document.getElementById(a);
                    images.style.borderColor = borderColorOff;
                var subject = document.getElementById('s'+a);
                    subject.style.borderColor = borderColorOff;
                imgClicked = 0;
            }
        }
        function heartMouseOver(a) {

            if (imgClicked < 1) {
                var images = document.getElementById(a);
                    images.style.borderColor = borderColorOver;
                var subject = document.getElementById('s'+a);
                    subject.style.borderColor = borderColorOver;
            }
        }
        function heartMouseOut(a) {

            if (imgClicked < 1) {
                var images = document.getElementById(a);
                    images.style.borderColor = borderColorOff;
                var subject = document.getElementById('s'+a);
                    subject.style.borderColor = borderColorOff;
            }
        }       
        </script> 


        <body>

        <div class="pictureBox">    
            <div class="picture"> 
              <img onmouseover="heartMouseOver(this.id)" onmouseout="heartMouseOut(this.id)" id="0" onclick = "heartMouseClick(this.id)" class="images" border="5" src="1.jpg">                            
            </div>      
            <div class="subject" id="s0" border ="5">
                Image 0 Description
            </div>
        </div>
        <div class="pictureBox">            
            <div>
              <img onmouseover="heartMouseOver(this.id)" onmouseout="heartMouseOut(this.id)" id="1" onclick = "heartMouseClick(this.id)" class="images" border="5" src="emergency.jpg">                            
            </div>      
            <div class="subject" id="s1"  border ="5">
                Image 1 Description
            </div>
        </div>
        <div class="pictureBox">            
            <div>
                <img onmouseover="heartMouseOver(this.id)" onmouseout="heartMouseOut(this.id)" id="2" onclick = "heartMouseClick(this.id)" class="images" border="5" src="lebron.jpg">                            
            </div>      
            <div class="subject"  id="s2" border ="5">
                Image 2 Description
            </div>
        </div>        

        </body>
        </html>

You were on the right track, I just added id's and pass those instead.

My pleasure. I was gonna get fancy and show how you can bind all the events at one time, but this is a good starting point.

Saini · Accepted Answer · 2016-08-26 17:35:10Z

1

You can assign unique id(ID) to each of the img element and then can use the array functionality to take care of each of the image. Or try this:

<img id="image1101" src="image1.jpg" onclick="myFunction(this.id)" />

This will activate the function named myFunction() with the "id" as the parameter.

Then you can use this in your javascript as:

<script type="text/javascript">

            function myFunction(image_id){
               // use your funcitons here such as
               // document.getElementById(image_id).style;
               // 
            }

        </script>

answered Aug 26, 2016 at 17:35

Saini

7343 silver badges8 bronze badges

Comments

DLH · Accepted Answer · 2016-08-26 17:30:23Z

0

You can assign a new property to the image objects since you already have an array of them anyway. For example:

images[heartImg].imgClicked = true;

It can be a little dicey to modify a built-in object, but it should be safe enough if you choose a distinctive enough property name that no other script would possibly try to use the same name.

If you can't bring yourself to add your own property to the image objects, an alternative would be to store the imgClicked property in a custom data attribute of the relevant DOM elements.

answered Aug 26, 2016 at 17:30

DLH

5655 silver badges14 bronze badges

Collectives™ on Stack Overflow

Javascript Images onclick

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related