zoom in image on mouse over
Moderator: General Moderators
Re: zoom in image on mouse over
Add "z-index: 1;" to the :hover style section, and "z-index: 0;" in the standard section.
Re: zoom in image on mouse over
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.
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.
Re: zoom in image on mouse over
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>
Re: zoom in image on mouse over
Try it.
And use appropriate [syntax=css]/[/syntax][syntax=html]tags please.[/syntax]
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.
Re: zoom in image on mouse over
didnt work. this sux!
- 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
iknowu99, are you using Internet Explorer? If so the CSS hover pseudo-element will not work unless you have IE7 or newer.
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
JavaScript
Code: Select all
img.my_class {height: 100px; width: 100px;}
img.my_class:hover, img.my_class_h {height: 200px; width: 200px;}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');" />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'); }}