March 9th, 2010 | 
Author: Hi everyone! I am building a website for a school project and desperately need your help!
I drew some pictures which will be used as link buttons. I want them to change into another picture when someone hovers over the image so they know it is clickable. I also want to display a little note when they are over the image with the mouse. I can’t use Flash to create this so it has to be pure html and javascript only.
e.g. On certain websites, when you hover over a link or picture, a small yellow box appears with some captions or words.
Last but not least, when someone clicks on a link, I want the link to open up a new browser in the size I want (not full screen) and there should be no side scroll bars as well.
If you know the scripts to this or know a website explaining how to do this, please provide me with a link. I googled for 2 straight hours but couldn’t find anything about it. Thanks!
Wow! Thank you so much for your help everyone!! I will check out these links you have provided. Thank you again and Merry Christmas!!
Posted in 
Tags:
Your first query needs to make use of ‘mouseover’. Here’s how to use it
http://www.htmlcodetutorial.com/images/_IMG_START_MOUSEOVER.html
Not sure about your second query.
///
http://www.pageresource.com/jscript/jhover1.htm
This page has the script and a tutorial that will get up and running
To change images when when you hover on the link u must use ‘onmouseover’ attribute of anchor.
To show a tool tip try using title=”some thing” for anchors and alt=”something” for images.
To open a new window with size u specify and no scrollbars and menus use java script window.open(), better you write a function for this.
For more help you will find ‘www.w3schools.org’ handy
hello , first thing u must not pe panic otherwise u will not see what is infront of u .. u can visit the www.w3schools.com and link to the html section and u will find all what u will need regarding to the things u asked for it…. have fun inside ur website
WWW.htmllive.COM
Justin
3rd query:-
————
To open another window:-(last query)
<><><><><><><><><><><><><>
window.open(“url”,,”scroll=no;
resize=no;”)
1st param is url/path ,the file name to be opened.
1st question:-
—————-
I ll give u the logic, i doesnt know exactly.
onmouseover, call a javascript that displays another image. May be u can put the picture in div tag, and when the function is invoked u can give, div_id.innerHTML=”pic.gif”
2ndQuestion:-
—————–
To have a tool tip;
<><><><><><><>
Use “title” property of your tag.
For image-based menu’s, I suggest you use only HTML and CSS. I believe what you’re looking for would be found here: http://www.cssplay.co.uk/menus/flickerfree_mk3.html
If you are using (X)HTML, and would like your code to validate at W3C, then an external javascript would work perfectly in opening a new window. Copy the following code into notepad, save as ‘external.js’ :
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName(“a”);
for (var i=0; i
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
***********
of your website page:Then include this line within the
Whenever you have a link where a new window is to open, just put rel=”external” into that link like this: Linked Text
**************
Those little text boxes you get when you hover over something are tooltips. You can find one here:
http://www.dynamicdrive.com/dynamicindex5/
Hope this helps,
DianeD