7 Replies - 705 Views - Last Post: 03 August 2014 - 10:50 AM

#1 mon_e_mons  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 05-October 12

How do I change pictures by mouse over?

Posted 31 July 2014 - 08:36 PM

I have some code here with 5 small images and one larger image. The idea is to make the smaller images kind of thumbnails. I want it so when you mouse over one of the smaller images, the larger image takes on the appearance of the smaller image, and becomes an link to the same location as the small image. I don't know the JS to accomplish this. any help would be appreciated. Here's my code:

<!DOCTYPE html>
<html>
<head>
	<title>Test 4</title>
	<style type="text/css">
	img { width:  10%;
		  height: 10%;
		  margin:  1%;}

	div img { width: 20%;
			  height: 20%;}
	</style>


	<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
	<script>
	function change() {
		var selectedLink = document.getElementById("selectedLink");
		var selectedImg  = document.getElementById("selectedImg" );

		selectedImg.src   = $(this).src;
		selectedLink.href = $(this).href;
	}

	</script>


</head>
<body>
	<div><a id="selectedLink"href="https://twitter.com"><img id="selectedImg"src="img/twitter.png"></a></div><br>



	<a id="img1" onmouseover="change();"href="https://twitter.com"  ><img src="img/twitter.png"  ></a>
	<a id="img2" onmouseover="change();"href="https://facebook.com" ><img src="img/facebook.png" ></a>
	<a id="img3" onmouseover="change();"href="https://instagram.com"><img src="img/instagram.png"></a>
	<a id="img4" onmouseover="change();"href="https://linkedin.com" ><img src="img/linkedin.png" ></a>
	<a id="img5" onmouseover="change();"href="https://pinterest.com"><img src="img/pinterest.png"></a>


</body>
</html>

This post has been edited by mon_e_mons: 31 July 2014 - 08:48 PM


Is This A Good Question/Topic? 0
  • +

Replies To: How do I change pictures by mouse over?

#2 mon_e_mons  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 05-October 12

Re: How do I change pictures by mouse over?

Posted 31 July 2014 - 09:38 PM

this is a working version of it but all of the JS is inline and it looks hideous. I want the mouseover to access a function instead.

<!DOCTYPE html>
<html>
<head>
	<title>Test 4</title>
	<style type="text/css">
	img { width:  10%;
		  height: 10%;
		  margin:  1%;}

	div img { width: 20%;
			  height: 20%;}
	</style>
</head>
<body>
	<div><a id="selectedLink"href="https://twitter.com"><img id="selectedImg"src="img/twitter.png"></a></div><br>
	<a id="link1" onmouseover="document.getElementById('selectedLink').href = this.href;" href="https://twitter.com"  ><img id="img1" onmouseover="document.getElementById('selectedImg').src = this.src;" src="img/twitter.png"  ></a>
	<a id="link2" onmouseover="document.getElementById('selectedLink').href = this.href;" href="https://facebook.com" ><img id="img2" onmouseover="document.getElementById('selectedImg').src = this.src;" src="img/facebook.png" ></a>
	<a id="link3" onmouseover="document.getElementById('selectedLink').href = this.href;" href="https://instagram.com"><img id="img3" onmouseover="document.getElementById('selectedImg').src = this.src;" src="img/instagram.png"></a>
	<a id="link4" onmouseover="document.getElementById('selectedLink').href = this.href;" href="https://linkedin.com" ><img id="img4" onmouseover="document.getElementById('selectedImg').src = this.src;" src="img/linkedin.png" ></a>
	<a id="link5" onmouseover="document.getElementById('selectedLink').href = this.href;" href="https://pinterest.com"><img id="img5" onmouseover="document.getElementById('selectedImg').src = this.src;" src="img/pinterest.png"></a>
	<p id="test"></p>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#3 mon_e_mons  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 05-October 12

Re: How do I change pictures by mouse over?

Posted 31 July 2014 - 09:52 PM

figured it out, fellas

<!DOCTYPE html>
<html>
<head>
	<title>Test 4</title>
	<style type="text/css">
	img { width:  10%;
		  height: 10%;
		  margin:  1%;}
	div img { width: 20%;
			  height: 20%;}
	</style>
	<script>
	function change(link, img) {
		var selectedLink  = document.getElementById("selectedLink");
		var selectedImg   = document.getElementById("selectedImg");

		var thumbLink     = document.getElementById(link);
		var thumbImg      = document.getElementById(img);

		selectedLink.href = thumbLink.href;
		selectedImg.src   = thumbImg.src;
	}
	</script>
</head>
<body>
	<div><a id="selectedLink"href="https://twitter.com"><img id="selectedImg"src="img/twitter.png"></a></div><br>
	<a id="link1" onmouseover="change('link1', 'img1')" href="https://twitter.com"  ><img id="img1" src="img/twitter.png"  ></a>
	<a id="link2" onmouseover="change('link2', 'img2')" href="https://facebook.com" ><img id="img2" src="img/facebook.png" ></a>
	<a id="link3" onmouseover="change('link3', 'img3')" href="https://instagram.com"><img id="img3" src="img/instagram.png"></a>
	<a id="link4" onmouseover="change('link4', 'img4')" href="https://linkedin.com" ><img id="img4" src="img/linkedin.png" ></a>
	<a id="link5" onmouseover="change('link5', 'img5')" href="https://pinterest.com"><img id="img5" src="img/pinterest.png"></a>
	<p id="test"></p>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#4 baavgai  Icon User is offline

  • Dreaming Coder
  • member icon

Reputation: 5941
  • View blog
  • Posts: 12,869
  • Joined: 16-October 07

Re: How do I change pictures by mouse over?

Posted 02 August 2014 - 01:32 PM

Awww, you chucked the jquery? Just for fun, you could do this almost entirely in Javascript:
<!DOCTYPE html>
<html>
<head>
    <title>Test 4</title>
    <style type="text/css">
        img { width:  10%; height: 10%; margin:  1%; }
        div img { width: 20%; height: 20%; }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var selectedLink  = $("#selectedLink");
            $.each($("#medialinks a"), function(idx, ele) {
                var a = $(ele);
                var img = $("img", a);
                var f = function() {
                    selectedLink.attr("href", a.attr("href"));
                    $("img",selectedLink).attr("src", img.attr("src"));
                };
                a.mouseover(f);
                if (idx==0) { f(); }
            });
        });
    </script>
</head>
<body>
    <div> <a id="selectedLink"><img /></a> </div>
    <div id="medialinks">
        <a href="https://twitter.com"><img src="img/twitter.png" /></a>
        <a href="https://facebook.com"><img src="img/facebook.png" /></a>
        <a href="https://instagram.com"><img src="img/instagram.png" /></a>
    </div>
</body>
</html>



Note how much less typing you need do in markup. Also, adding more links becomes pretty trivial.

Hope this helps.
Was This Post Helpful? 1
  • +
  • -

#5 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3838
  • View blog
  • Posts: 13,592
  • Joined: 12-December 12

Re: How do I change pictures by mouse over?

Posted 02 August 2014 - 04:48 PM

There are a number of ways to do this of course ;)
<!DOCTYPE html>
<html>
<head>
    <title>Test 4</title>
    <style type="text/css">
        img { width: 100px; height: 100px; margin: 1%; }
        #selectedLink img { width: 200px; height: 200px; }
    </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#medialinks').on('mouseover', 'a', function () {
                $('#selectedLink').attr('href', $(this).attr('href'));
                $('#selectedLink img').attr('src', $('img', this).attr('src'));
            });
        });
        // or put the script at the bottom of the page
    </script>
</head>
<body>
    <div><a href="https://twitter.com" id="selectedLink"><img src="images/coyote1.jpg"></a></div>
    <div id="medialinks">
        <a href="https://twitter.com"><img src="images/coyote1.jpg"></a>
        <a href="https://facebook.com"><img src="images/coyote2.jpg"></a>
        <a href="https://instagram.com"><img src="images/coyote3.jpg"></a>
    </div>
</body>
</html>

This post has been edited by andrewsw: 02 August 2014 - 04:54 PM

Was This Post Helpful? 0
  • +
  • -

#6 baavgai  Icon User is offline

  • Dreaming Coder
  • member icon

Reputation: 5941
  • View blog
  • Posts: 12,869
  • Joined: 16-October 07

Re: How do I change pictures by mouse over?

Posted 03 August 2014 - 01:39 AM

Heh, compulsive refactoring? I understand. ;)

However, by getting rid of apparently unnecessary variable declarations, you do loose something here. My code with the variables does a DOM lookup only once for those vars, capturing the result in a closure. Without them, the lookup is every call.

With the in mind, for max effect:
$(document).ready(function() {
    var aDst = $("#selectedLink");
    var imgDst = $("img", aDst);
    var getMouseover = function(a) {
        var img = $("img", a);
        return function() {
            aDst.attr("href", a.attr("href"));
            imgDst.attr("src", img.attr("src"));
        };
    };
    $.each($("#medialinks a"), function(idx, ele) {
        var a = $(ele);
        a.mouseover(getMouseover(a));
        if (idx==0) { a.mouseover(); }
    });
});


Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3838
  • View blog
  • Posts: 13,592
  • Joined: 12-December 12

Re: How do I change pictures by mouse over?

Posted 03 August 2014 - 01:54 AM

Well, I was considering one minor adjustment ;)
<!DOCTYPE html>
<html>
<head>
    <title>Test 4</title>
    <style type="text/css">
        img { width: 100px; height: 100px; margin: 1%; }
        #selectedLink img { width: 200px; height: 200px; }
    </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var selLink = $('#selectedLink');
            $('#medialinks').on('mouseover', 'a', function () {
                selLink.attr('href', $(this).attr('href'));
                $('img', selLink).attr('src', $('img', this).attr('src'));
            });
        });
        // or put the script at the bottom of the page
    </script>
</head>
<body>
    <div><a href="https://twitter.com" id="selectedLink"><img src="images/coyote1.jpg"></a></div>
    <div id="medialinks">
        <a href="https://twitter.com"><img src="images/coyote1.jpg"></a>
        <a href="https://facebook.com"><img src="images/coyote2.jpg"></a>
        <a href="https://instagram.com"><img src="images/coyote3.jpg"></a>
    </div>
</body>
</html>

but "let's not bicker and argue about who killed who..". Andy :)
Was This Post Helpful? 0
  • +
  • -

#8 mon_e_mons  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 05-October 12

Re: How do I change pictures by mouse over?

Posted 03 August 2014 - 10:50 AM

View Postbaavgai, on 02 August 2014 - 01:32 PM, said:

Awww, you chucked the jquery? Just for fun, you could do this almost entirely in Javascript:
[snip]

Note how much less typing you need do in markup. Also, adding more links becomes pretty trivial.

Hope this helps.



Thanks for this solution :D/>/> I DID find it silly writing the tag id for the images and links twice to use my method :\

This post has been edited by Dormilich: 03 August 2014 - 11:33 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1