homepage Welcome to WebmasterWorld Guest from 54.196.168.78
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Enlarge Image on Mouseover
jarodsafehouse71




msg:4564721
 2:49 pm on Apr 14, 2013 (gmt 0)

Hi

I would like to be able to enlarge certain images on my site in the same manner they enlarge the one image here: [prlog.org...]

Can someone tell me how to code that? I am a novice/hobbyist web designer. Any and all help would be most appreciated!

Thank you :)

 

birdbrain




msg:4564751
 7:46 pm on Apr 14, 2013 (gmt 0)

Hi there jarodsafehouse71,

and a warm welcome to these forums. ;)

Here is a CSS example that will work in the following browsers...

  • IE10
  • Firefox 20.0.1
  • Opera 12.1.5
  • Safari 5.1.7
  • Chrome 26.0.1410.64




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
background-color:#000;
color:#fff;
}
#container {
width:800px;
margin:auto;
}
#pub-link {
position-relative;
float:left;
width:182px;
height:22px;
margin:0 20px 20px 0;
}
#pub-link img {
position:absolute;
width:182px;
height:22px;
border:1px solid #fc9;
-webkit-transition:all 2s ease;
-moz-transition:all 2s ease;
-o-transition:all 2s ease;
transition:all 2s ease;
}
#pub-link img:hover {
width:800px;
height:99px;
border:5px solid #fc9;
}
</style>

</head>
<body>

<div id="container">

<a id="pub-link" href="http://www.pubcon.com/">
<img src="http://www.pubcon.com/banners/nola11.png" alt="pub con banner">
</a>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p>

</div>

</body>
</html>


birdbrain

Marshall




msg:4564782
 10:10 pm on Apr 14, 2013 (gmt 0)

jarodsafehouse71,

The CSS birdbrain provided will not smoothly increase the image as on your demo page. It is done with javascript:

<script type="text/javascript">
var gi,gd,gj=1,gn=20,gt=20,gs,swd,sht,lwd,lht;function sli(ii,wd1,ht1,wd2,ht2,s){gi=ii;gd=1;swd=wd1;sht=ht1;lwd=wd2;lht=ht2;gs=s;rs();}function ssi(ii,wd1,ht1,wd2,ht2,s){gd=-1;swd=wd1;sht=ht1;lwd=wd2;lht=ht2;gs=s;rs();}function xy(x1,x2,gj){return (x2-x1)*gj/gn+x1;}function rs(){var w=Math.round(xy(swd,lwd,gj));
var h=Math.round(xy(sht,lht,gj));
if(gs)gi.style.left=(swd-w)+"px";
gi.style.width=w+"px";gi.style.height=h+"px";if(gd>0 && gn>gj){gj++;setTimeout('rs()',gt);}else if(0>gd && gj>0){gj--;setTimeout('rs()',gt);}}
function imx(n){
var f;
for(var i=0;i< 5;i++){
f=document.getElementById('imx'+i);
if(f)f.className=(i==n)?"imxs":"";
f=document.getElementById('im'+i);
if(f)f.style.display=(i==n)?"":"none";
}
}
</script>

CSS:
<style type="text/css">
.im2{position:relative;z-index:99}
.imx{padding-bottom:5px}
.imx a{padding:2px 4px;text-decoration:none;color:#404040;border:1px solid #808080}
.imxs{background:#e0e0e0}
.imt{padding-top:5px;font-weight:bold} /* for text below the image */
</style>

HTML:
<div style="height:212px"><a href="#" target="_blank"><img src="" alt="" width="140" height="212" onmouseover="sli(this,140,212,280,425,0)" onmouseout="ssi(this,140,212,280,425,0)" class="im2" /></a></div><div class="imt">Test text.</div>

(this,140,212,280,425,0) represents the image's width and height, the first two numbers being the thumbnail size, the second two being the enlarged size. The image's smaller dimensions have to be included in the image <src> or else the larger version will appear by default.

Marshall

birdbrain




msg:4564790
 10:30 pm on Apr 14, 2013 (gmt 0)

Hi there Marshall,


The CSS birdbrain provided will not smoothly increase the image as on your demo page.


I know that I am a bald headed old fart and that my eye sight may leave a little
bit to be desired, but the CSS transition does seem super smooooooooth to me. ;)

Of course, you may have only tried my little effort with IE6, and missed it altogether. :)

birdbrain

jarodsafehouse71




msg:4564797
 11:12 pm on Apr 14, 2013 (gmt 0)

LOL, you're funny birdbrain.

Thank you both so much for your help. I think both examples enlarge smoothly but the example from Marshall is more suited to my needs since I can set the size specs for each image.

Marshall, is it possible to control how fast the image enlarges, and how do I place the images side-by-side?

[jarodsafehouse.com ]

(please disregard the crap on this page. I am currently rebuilding my entire site and just chose this page to tinker.)

Thank you both again!

birdbrain




msg:4564800
 11:33 pm on Apr 14, 2013 (gmt 0)

Hi there jarodsafehouse71,

The CSS transition does allow you to define the initial
and final dimenensions and also the time duration. ;)

Your consideration, though, should be focused on
your expected users' browser choice.



birdbrain

lucy24




msg:4564838
 1:29 am on Apr 15, 2013 (gmt 0)

Suprised nobody suggested option B: snoop and swipe.


At this point I accidentally closed a tab, and don't feel like typing it all over again when it's so straightforward. Open page source, find name of function, search some more, copy and paste. Some interesting stuff along the way, though.

:: detour to look up Mystery Domain ::

Fotiman




msg:4564930
 1:57 pm on Apr 15, 2013 (gmt 0)

I'm going to side with birdbrain on this one. You're talking about presentation, which is best done with CSS. Also, CSS transitions will be smoother than JavaScript solutions.
HOWEVER, if you want a solution that works for IE7, IE8, or IE9, then you'll need a JavaScript solution. So it really depends on your target audience.

lucy24




msg:4564963
 3:33 pm on Apr 15, 2013 (gmt 0)

fwiw: I spent some time poring over the code actually used in the referenced site. (The javascript lives at a site which belongs to amazon. I therefore feel not the smallest qualm of guilt about snooping.) It has to be attached to something with width and height attributes-- most easily an image, but an element with resizeable background-image will also do. So, one way or the other, it's a choice between CSS3 and javascript.

html:
onmouseover = "growIt(this,250,300,500,600,0)" onmouseout = "shrinkIt(this,250,300,500,600,0)"
Yes, the two sets of numbers are identical.

js:
var object, direction, stepcount = 1, fraction = 40, growtime = 20, leftpos;
var smwidth, smheight, lgwidth, lgheight;

function growIt(ii,width1,height1,width2,height2,left)
{
object = ii;
direction = 1;
setValues(width1,height1,width2,height2,left);
}

function shrinkIt(ii,width1,height1,width2,height2,left)
{
direction = -1;
setValues(width1,height1,width2,height2,left);
}

function setValues(w1, h1, w2, h2, lf)
{
smwidth = w1;
smheight = h1;
lgwidth = w2;
lgheight = h2;
leftpos = lf;
redraw();
}

function redraw()
{
var width = Math.round(xy(smwidth,lgwidth));
var height = Math.round(xy(smheight,lgheight));
if(leftpos) object.style.left = (smwidth-width) + "px";
object.style.width = width + "px";
object.style.height = height + "px";
if(direction > 0 && stepcount < fraction)
{
stepcount++;
setTimeout('redraw()',growtime);
}
else if(direction < 0 && stepcount > 0)
{
stepcount--;
setTimeout('redraw()',growtime);
}
}

function xy(first,second)
{
return (second-first)*(stepcount/fraction) + first;
}

I renamed all the variables to make their function more obvious. As coded, the function can only be used on one element on the page, because it's all done with global variables. Change them to arrays if you need to have zooming and popping going on in more than one place. Preferably on a page NOT devoted to selling men's underwear.

It all comes down to the
object.style.height
function, where "object" is a handle to the thing you're resizing. Everything else is window dressing.

Most easily done in a segment generated by php so you can ensure that the object's starting width and height match the numbers passed to the function.

The last value reflects-- the one that's 0 in the html-- the object's position ("left" in CSS). It isn't used in this particular page; presumably lots of other pages draw on the same code.

Fotiman




msg:4564973
 4:01 pm on Apr 15, 2013 (gmt 0)

@lucky24, Yuck!

jarodsafehouse71




msg:4564979
 4:08 pm on Apr 15, 2013 (gmt 0)

Hi there jarodsafehouse71,

The CSS transition does allow you to define the initial
and final dimenensions and also the time duration. ;)


Ok, going back to your proposal birdbrain, how would I define the initial and final dimension for multiple images? Is that possible without adding additional code to the CSS ?

jarodsafehouse71




msg:4564980
 4:14 pm on Apr 15, 2013 (gmt 0)

@lucky24 .... I am totally befuddled! LOL

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved