Welcome to WebmasterWorld Guest from 54.166.152.121

Forum Moderators: open

Message Too Old, No Replies

Enlarge Image on Mouseover

     
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 :)
7:46 pm on Apr 14, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
10:10 pm on Apr 14, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
10:30 pm on Apr 14, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
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!
11:33 pm on Apr 14, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
1:29 am on Apr 15, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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 ::
1:57 pm on Apr 15, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.
3:33 pm on Apr 15, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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.
4:01 pm on Apr 15, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



@lucky24, Yuck!
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 ?
4:14 pm on Apr 15, 2013 (gmt 0)



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

Featured Threads

Hot Threads This Week

Hot Threads This Month