zoom in image on mouse over

JavaScript and client side scripting.

Moderator: General Moderators

gethinw
Forum Newbie
Posts: 16
Joined: Tue Sep 23, 2008 4:02 am

Re: zoom in image on mouse over

Post by gethinw »

Add "z-index: 1;" to the :hover style section, and "z-index: 0;" in the standard section.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: zoom in image on mouse over

Post by pickle »

Look into absolute positioning or z-index.

We've given you a couple possible solutions, but I haven't seen you try to solve it yourself. Try implementing at least one of these solutions - do a web search if you have to - the answers are out there.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
iknowu99
Forum Commoner
Posts: 39
Joined: Thu Aug 14, 2008 3:20 pm

Re: zoom in image on mouse over

Post by iknowu99 »

like this?

Code: Select all

 
 <style type=text/css>
     .enlarge img{
    width:25px;
    height:15px;
    z-index: 0;
    }
    .enlarge:hover img{
    z-index: 1;
    width:500px;
    height:300px;
    } 
 </style>
 
 
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: zoom in image on mouse over

Post by pickle »

Try it.

And use appropriate [syntax=css]/[/syntax][syntax=html]tags please.[/syntax]
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
iknowu99
Forum Commoner
Posts: 39
Joined: Thu Aug 14, 2008 3:20 pm

Re: zoom in image on mouse over

Post by iknowu99 »

didnt work. this sux!
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: zoom in image on mouse over

Post by JAB Creations »

iknowu99, are you using Internet Explorer? If so the CSS hover pseudo-element will not work unless you have IE7 or newer.

Code: Select all

img.my_class {height: 100px; width: 100px;}
img.my_class:hover, img.my_class_h {height: 200px; width: 200px;}
Are you applying the CSS selector correctly? img.my_class is implemented as <img class="my_class" src="example.png" />.

If you want to use JavaScript give your image an id and change the class (using the CSS classes from above) the following way...

HTML

Code: Select all

<img id="example1" src="example.png" onmouseover="img(this.id,'over');" onmouseout="img(this.id,'out');" />
JavaScript

Code: Select all

function img(id,state){ if (state=='over') {  document.getElementById(id).className='my_class_h'; } else if (state=='out') {   document.getElementById(id).className='my_class'; } else {  alert('Error: Call function using parameters over or out'); }}
Post Reply