user3734311 user3734311 - 4 months ago 8
jQuery Question

JQuery Select one of multiple img in div

I'm new to JQuery and stuck on a simple problem. I wanted to take the markup below, and create a script that places a larger version of the mouse'd over img (one of the five from div) into p, "big". The one in "big" will match the last mouseover target, and will function as a link- just the same as the smaller version.

<!doctype html>
<html>
<head>
<meta charset = "UTF-8"/>
<title>Image Links</title>
</head>
<body>
<p id = "big">

</p>
<div id = "links">
<a href = "http://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "150" onmouseover="enlargeCopy();">
<a href = "https://www. .com "><img id = " " border = "0" alt = " " src=" " width = "200" height = "100">
<a href = "https://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100">
<a href = "http://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100">
<a href = "https://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100">
</div>
<script src="jquery-3.1.0.js"></script>
<script src = "Test 3.js"></script>

</body>
</html>


This is the js script I've attempted to use ><. The closest I've come to success is getting [object Object] to appear multiple times (instead of the intended larger image).

//intended to increase the size of imgs in div, and place the larger image at the top of the document

var enlargeCopy = function () {

var x = $(".links").children("img").css("width", "*=2");
var x = $(".links").children("img").css("height", "*=2");

document.getElementById("big").appendChild(document.createTextNode(x));
};


What I am attempting to do- explained more concisely:

-1. is to hover over any one of the five image anchors (in div of the html document)

-2. for the image that is being moused over to appear as a copy at the top of the page (in the currently empty p slot)

-3. for that copy to be twice as wide and twice as long as the moused over target

-4. for the copy to still also function as a link

Answer

If I understood you corectly you want to clone the image and append it to some element on mouseover, right? Maybe you can use jQuery's clone method:

$('#links a').on('mouseover', function(){
  $(this).clone().appendTo('#big');
  var originalWidth = $(this).find('img').width();
  var originalHeight = $(this).find('img').height();
  $('#big, #big img').css({'width': originalWidth * 2 + 'px', 'height': originalHeight * 2 + 'px'});
});
Also, you should close your anchor tags like this </a>.

I've also made you a FIDDLE.