javascript only - change image by hover over hidden radio button

Question

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!

I haven't tested, but why do you think a hidden element would have any interactive functionality? Also, could you please post the minimal ("[MCVE](http://stackoverflow.com/help/MCVE)") html that reproduces your problem? That looks like php at first glance, which is (mostly) irrelevant once the browser's rendered the page. — David Thomas, Aug 14 '14 at 17:10
If I understand this right, you want there to be a `label` that is visible that, when clicked, will select the `radio` it is associated with. But you want the actual radio button itself to be hidden. So the radio option will be selected "behind the scenes", basically. — jwatts1980, Aug 14 '14 at 18:37

score 0 · Accepted Answer · answered Aug 14 '14 at 19:27

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.

That worked so great! I agree with you on the radio buttons and yes, it was inherited code. I gave it to myself. lol. This is from when I first started developing 4 years ago. Lastly what would I add to the mouseEnter(el) function to change an image link thats wrapped around the img to the same src as the whats in the urlMap? I'll update the question to explain better. — ChrisKsag, Aug 15 '14 at 17:26

javascript only - change image by hover over hidden radio button

1 Answers1