CODEWITHSUNDEEP
javascripthtmlimageonmouseover
user3150191
user3150191

Reputation: 415

Javascript onMouseover to swap images

I have some code that makes an image larger when moused over:

<script>
function bigImg(x)
{
x.style.height="70px";
x.style.width="237px";
}

function normalImg(x)
{
x.style.height="56px";
x.style.width="218px";
}
</script>

and I call those functions with:

<a><img border="0" src="category_icons/addorder.png" onmouseover="bigImg(this)" onmouseout="normalImg(this)"></a>

But what I would really like to do is make it so the bigIMG(x) function also changes the image. I'm not extremely familiar with javascript and was wondering if someone knew what I can code in, to swap the image. The image name is addorder2.png. I've tried using this.src="addorder2.png"; but that is not working.

Upvotes: 1

Views: 2846

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

My 2 cents:

LIVE DEMONSTRATION

Don't use inline JS, rather you can set a data.* attribute
and an object literal that will contain your desired changes
and read it with JS:

<img class="zoom" src="img.jpg" data-enlarge='{"src":"img2.jpg", "zoom":"1.2"}'>

As you can see above we'll target with JS every element with class "zoom"

function enlarge(){

  var el = this,
      src = el.src,
      data = JSON.parse(el.dataset.enlarge);

  el.src = data.src;
  el.style.transition = "0.3s";
  el.style.transform  = "scale("+data.zoom+")";

  el.addEventListener('mouseleave', function(){
    el.src = src;
    el.style.transform = "scale(1)";
  },false);

}

var $ZOOM = document.querySelectorAll('.zoom');
for(var i=0; i<$ZOOM.length; i++){
  $ZOOM[i].addEventListener('mouseenter', enlarge, false);
}

Upvotes: 3

spassvogel
spassvogel

Reputation: 3541

This will do. Change the image src into "addorder2.png".

<script>
function bigImg(x)
{
    x.style.height="70px";
    x.style.width="237px";
    x.src = "addorder2.png";
}

function normalImg(x)
{
    x.style.height="56px";
    x.style.width="218px";
    x.src = " addorder.png";
}
</script>

Upvotes: 3

Roberto Maldonado
Roberto Maldonado

Reputation: 1595

Just change x.src property according to function:

function bigImg(x)
{
    x.style.height="70px";
    x.style.width="237px";
    x.src = "category_icons/addorder2.png";
}

function normalImg(x)
{
    x.style.height="56px";
    x.style.width="218px";
    x.src = "category_icons/addorder.png";
}

Upvotes: 2

StephenH
StephenH

Reputation: 1126

With Javascript you can edit the src attribute of the img.

Javascript:

function bigImg()
{
document.getElementById("myImg").src="addorder2.gif";
}

HTML:

<!DOCTYPE html>
<html>
<body>

<img id="myImg" onmouseover="bigImg()" src="addorder.png">

</body>
</html>

I recommend checking out w3schools to learn more about image document manipulation and of course specifically getting and setting the image src element

Upvotes: 2

Related Questions