Onmouseover

[dsinghldh]

Hi all

Iam developing a site where lots of small images are shown on home page,I want that whenever someone

places a mouse(onmouseover event) on small images they get bigger in size.Can anyone share code with me. Iam coding in PHP

Thanks

[phpQuestioner]

<style type="text/css">

.mysmallpic {
width:50px;
height:50px;
}

.mybigpic {
width:500px;
height:400px;
}

</style>

<script language="javascript">

function enlarge(pic) {
document.getElementById(pic).className="mybigpic";
}

function normal(pic) {
document.getElementById(pic).className="mysmallpic";
}

</script>

<img id="pic1" class="mysmallpic" src="" onmouseover="enlarge(this.id)" onmouseout="normal(this.id)">

[redbullmarky]

Hello and welcome to the forums.

Please make yourself familiar with the forum guidelines, and carefully read the board descriptions BEFORE posting a new topic. @phpfreaks is for questions regarding this site, not your own issues.

 

as for your question, it has nothing to do with PHP as it's a client-side issue. you can probably achieve it with pure CSS as an alternative to the Javascript one suggested by phpQuestioner.

 

.image {
  width:75px;
  height:75px;
}
.image:hover {
   width:120px;
   height:120px;
}

 

although (not sure if still the case) i believe some browsers don't like :hover on anything other than regular links. some CSS-only tricks dealing with this sort of things can be found here: http://www.cssplay.co.uk