How might I change an image using javascript
<script>
colorurlMap {
"img 1" : "images/img1.jpg",
"img 2" : "images/img2.jpg",
ect.
}
function
</script>
what would I add to the following function to make the image change as well? EDIT***NEVERMIND I FOUND IT............ THE BELOW WORKS PERFECTLY...THANKS AGAIN
function mouseEnter(el) {
var img = document.getElementById('basehood');
var asrc = document.getElementById('imgLink');
var color = el.getAttribute("data-color");
img.src = colorUrlMap[color];
asrc.href = colorUrlMap[color];
}
<a id="imgLink" href="SAME AS IMG SRC(images/myimg.jpg)"><img id="basehood" src="images/myimg.jpg"> </a>
<div style='width: 65px; height:100px; padding: 5px 8px 5px 8px; float: left;'>
<label for='". $row['uniqueID'] ."' style='cursor:pointer;'>
<img class='inputbox' src='". $row['color_img'] ."' alt='". $row['color_name'] ."' width='60' height='auto'>
<p class='colorpallet'>". $row['color_name'] ."</p>
</label>
<input class="inputbox" id="'. $row['uniqueID'] .'" type="radio" name="finish" onmouseenter="document.getElementById('basehood).src = colorUrlMap[this.value];" value="'. $row['color_value'] .'" onClick="this.form.submit()" style="display:none; cursor:pointer">
Thanks In Advance, I really appreciate your help!
There is no reason to have a hidden element then attempt to fire a mouse event on it. If it's hidden, it doesn't get events. (While it is technically possible in JS to use the event on one element, such as a div, to cause an event to be fired on another element, the <input type=radio />, it is a confusing and poor solution.) You have not mentioned if you are stuck trying to make this work with code you inherited, but for the moment I am not going to assume that.
I would recommend doing this a different way entirely. I am guessing "you're stuck" with <input type=radio /> only because you need the value field to hold the $row['color_value'] so that you can get the img url from colorurlMap.
I will post the code first the explain the changes:
<script>
colorurlMap {
"img 1" : "images/img1.jpg",
"img 2" : "images/img2.jpg" //,
//...
}
function mouseEnter(el) {
var img = document.getElementById('basehood');
var color = el.getAttribute("data-color");
img.src = colorUrlMap[color];
}
function mouseClick(el) {
var color = el.getAttribute("data-color");
var hiddenField = document.getElementById("<?php $row['hiddenID']; ?>");
hiddenField.value = color;
el.form.submit();
}
</script>
<img id="basehood" src="images/myimg.jpg">
<div data-color='<?php $row['color_value']; ?>' onmouseenter='mouseEnter(this)' onclick='mouseClick(this)' style='width: 65px; height:100px; padding: 5px 8px 5px 8px; float: left;'>
<label style='cursor:pointer;'>
<img class='inputbox' src='<?php $row['color_img']; ?>' alt='<?php $row['color_name']; ?>' width='60' height='auto'>
<p class='colorpallet'><?php $row['color_name']; ?></p>
</label>
</div>
<input type="hidden" id='<?php $row['hiddenID']; ?>' name="finish" value="" />
1) I use a data- attribute on the div. (Using data attributes) The short version is that data- attributes are a common and well supported HTML technique. You can see in the mouseEnter function that I use el.getAttribute to get the value of the data-color attribute on the div. If you were using jQuery, you could use .data() function like var color = $(el).data("color");.
2) I also removed the <input type=radio /> completely, and put the onmouseenter and onclick functions on the div.
3) In place of the radio, I added a <input type=hidden /> to hold the selected color value. You can have 1 hidden field for the form (instead of several radios), and it's value is set when the user clicks on the div, right before the form is submitted.