JSFiddle - React, Tailwind, and code Playground

by danShumway

HTML

<script src="http://data.whicdn.com/images/13940130/dogs_63_large.jpg"></script>
<script src="http://www.dogguide.net/blog/wp-content/uploads/2008/10/2597866140_ab1cc67da0.jpg"></script>
<!--HTML-->
<!--The alt text is for accessability.  If someone who is blind uses your page, they'll be able to have that text read to them.-->
<!--The order of the tags below doesn't matter, so you could either copy this verbatim or switch stuff around as needed.-->

<img id = 'rolloverImage' src="http://data.whicdn.com/images/13940130/dogs_63_large.jpg" alt="This image changes with mouseOvers!" onmouseover='changePicture("http://www.dogguide.net/blog/wp-content/uploads/2008/10/2597866140_ab1cc67da0.jpg")' onmouseout='changePicture("http://data.whicdn.com/images/13940130/dogs_63_large.jpg")'></img>

CSS

/*I haven't included any CSS, but I'm assuming you've got that under control*/

JavaScript

//This block of javascript will change the url that the image points to.
//You could also split this into two blocks of code (1 for rollover, 1 for rollout), but that would be unneccessarily long.


changePicture = function(url)
{
    document.getElementById('rolloverImage').src = url;
}

//document.getElementById allows us to select any html element that's being rendered on the screen (See the id='rolloverImage' above).
//Then we can edit it's properties, like which image it points to.
//You'll notice that the .src matches the .src we have in the above html as well.  And the url of the image is passed in whenever we call this block of code -
//hence, changePicture appears twice in the above html, once for when the mouse is over the image, and *importantly* once for when the mouse leaves the image.