Hi, i wanna create a mouseover effect. When i move the mouse over few buttons i want to display different pictures in one box. How can i achieve dis? Thanking u in advance.

http://www.google.com/search?hl=en&lr=&ie=UTF-8&oe=UTF-8&q=mouseover+%2B+html

You'll need to use JavaScript:

<img name="pic1" src="hello_off.gif" onMouseOver="document.pic1.src='hello_on.gif'" onMouseOut="document.pic1.src='hello_off.gif'">

(not sure if that's correct, it's been a while since I've done JavaScript). There are also programs you can use to do mouseover effects; for example: http://www.mha.ca/toolwiz/.

You can create a mouseover text description, similar to an image alt tag, that will be viewed when your mouse is placed over the text link. Place "title="your text description"" within your HTML link code.


<A HREF="http://www.yourdomain.com/" TITLE="Your text description">Your Text</A>

Example:

Your Text

In addition, you can display your description text in a list by adding these characters .



<A HREF="http://www.yourdomain.com/" TITLE="Webmaster Resources:
Counters
Guestbooks
Autoresponders
and more...#10; ">Your Text</A>

The above TITLE description would be displayed like this when you place your mouse over the link:

Example:

Your Text

Edit the text indicated in red to suit your needs.

I hope this one helps.

Try this;
Place this in the head section of your page.
<script type="text/javascript">

function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;

</script>



Then put this where you want the images.
<img src="NON-MOUSOVER"
hsrc="MOUSE-OVER">

OR use CSS and avoid all java as some people turn java off when surfing the web. See here:

http://www.meyerweb.com/eric/css/edge/popups/demo.html

Originally posted by Acronym BOY
OR use CSS and avoid all java as some people turn java off when surfing the web. See here:

http://www.meyerweb.com/eric/css/edge/popups/demo.html
You can also check out http://www.alistapart.com/stories/rollovers/ for other CSS rollover techniques.

Thanks Dogma, I knew I was forgetting one :)

I believe Blue Robot also has one or two tricks in there as well.