Javascript is not always a best option for some simple tasks that can be done via pure HTML or CSS. Javascript has platform issues i.e. different browsers might have different implementation of interpreting Javascript language. Moreover, Javascript might be turned off by the users (some users doesn’t want this at all).
In many web page designing, you might want to change a image e.g. style, width/height etc. when mouse is moved upon it. Of course, this can be done by Javascript by changing image’s src or style property. And the onmouseover and onmouseout should be defined to reference to corresponding Javascript functions. You can simply using CSS to achieve this, for example,
1 2 3 4 5 6 7 8 9 10 11 12 | a img.theimage{ border:0; cursor:pointer; border-width:0; opacity:0.3; filter:alpha(opacity=30); } a:hover img.theimage{ width:220px; opacity:1; filter:alpha(opacity=100); } |
a img.theimage{
border:0;
cursor:pointer;
border-width:0;
opacity:0.3;
filter:alpha(opacity=30);
}
a:hover img.theimage{
width:220px;
opacity:1;
filter:alpha(opacity=100);
}And use the defined class in HTML img tag like this.
1 | <a href='#'><img class='theimage' src='../images/2013/boy3.jpg'></a> |
<a href='#'><img class='theimage' src='../images/2013/boy3.jpg'></a>
It will produce the following (try moving mouse upon the image).
–EOF (The Ultimate Computing & Technology Blog) —
loading...
Last Post: Preloading Images using Javascript, CSS or Pure HTML
Next Post: Codeforces: A. Roma and Lucky Numbers
