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