HTML questions. Please help!?

Question

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!!

Answer 1

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.
///

Answer 2

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 var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;

***********
Then include this line within the of your website page:


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

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

i dont believe its viable ive by no means obvious it performed... however, when you've got mozilla firefox you'll do plenty of alternative matters. there are plenty of particularly extraordinary upload ons for firefox that you simply cant do with web explorer

Answer 7

http://www.pageresource.com/jscript/jhover1.htm
This page has the script and a tutorial that will get up and running

Answer 8

WWW.htmllive.COM


Justin