write a function on java script using onmouseover event to change the picture . "When the user moves the mouse pointer over the green image, A function should be called to change the source of image to “greenpanadol.jpg” and to set the price variable to 1.500 BHD. The price value and BHD sign should be placed inside "
write a function on java script using onmouseover event to change the picture .
"When the user moves the mouse pointer over the green image, A function should be called to change the source of image to “greenpanadol.jpg” and to set the price variable to 1.500 BHD. The price value and BHD sign should be placed inside <p id="price"> </p>"
- In style tag:
-
- img2 is for target image, that is, greenpanadol.
- img1, is for red color
- img3 is for green color, and
- price is for paragraph.
- In body tag three images are created with the above mentioned tags.
- A paragraph with id as price is also created. Its display style is hidden.
- On hovering over img3, the border changes and img2 is displayed along with price.
- On hovering out of img3, the border changes back to normal and img2 and price is not displayed anymore.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Image hover demo</title>
<style>
#img2
{
position: top;
margin-right:auto;
display: none;
}
#img1:hover
{
border-width: "1px";
border-color: white;
border-style: solid;
}
#img3:hover
{
border-width: "1px";
border-color: black;
border-style: solid;
}
#price
{
display: none;
}
</style>
</head>
<body>
<img id="img2" src="greenpanadol.png"
width = "300" height = "300"/>
<b>Color: </b>
<img id="img1" src="https://i.ytimg.com/vi/fOoeCpN6mmY/maxresdefault.jpg"
width = "30" height = "30"/>
<img id="img3"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYwAAAB/CAMAAADLlgV7AAAAA1BMVEUAzADANaWYAAAASElEQVR4nO3BMQEAAADCoPVPbQsvoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAICjAcTzAAEggOyyAAAAAElFTkSuQmCC"
width="30" height="30"/>
<b><p id="price">Price: 1.500 BHD</p></b>
<form>
<b><label for="cars">Quantity:</label></b>
<select name="quant" id="qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<pre><input type="submit" value="+Add">
</select>
</form>
<script>
var img1 = document.getElementById("img1"),
img2 = document.getElementById("img2");
img3 = document.getElementById("img3");
Price = document.getElementById("price");
img3.onmouseover = function(){
img2.style.display = "block";
price.style.display = "block";
}
img3.onmouseout = function(){
img2.style.display = "none";
price.style.display = "none";
}
</script>
</body>
</html>
Step by step
Solved in 3 steps with 2 images
