Need JavaScript help

@johndoe190Dec 02.2003

Hey im a newbie web developer who studys web dev in the UK. I was wondering if anyone could he me with this. I want to be able to when you roll over a hyperlink an image comes up in a totally different place like at the bottom of the page. I have looked for the code but all i keep finding is a image rollover code which i know how to do.

If anybody could help and explain the code i would be very grateful.

to post a comment

JavaScript

27 Comments(s) _↴

@TheBearMayDec 02.2003 — #Well if you have a triggering event (the rollover), then all you need is a div or frame positioned where you want the image to display. If it's only one image you can pre-load it and set the style.visibility attribute to hidden, and unhide it when triggered. If you have multiple images, same concept except that you will also need to change the .src attribute of the image to point to the new source.

@johndoe190authorDec 02.2003 — #Yeah i think i get you. Cheers for replying so quickly.

This is the code i want to add it to

<A HREF="news.html" TARGET="BAD"><FONT FACE="verdana,arial" SIZE=2> HOME</B></FONT></A>

Could you please show me what to add.

I know where you want to place it you would just insert style="etc etc " for the positioning.

Cheers again

@TheBearMayDec 02.2003 — #Something similiar to:

[code=php] 
 
 ...
 var imageVis='false';
 function imageDisp(){
 
 if (imageVis) { //hide 
 imgDiv.style.visibility='hidden';
 imageVis='false';
 }else{
 imgDiv.style.visibility='visible';
 imageVis='true';
 }
 }
 ...
 <a href=....
 
 <div id='imgDiv' style='visibility:hidden.....'>
 <img id='imgReplace' src=.....
 [/code]

If you need to change the image content simply add the line

imgReplace.src='[i]newImagePath[/i]';

@johndoe190authorDec 02.2003 — #Hey ive added that line to my coding and it didnt work.

the first one i tried was :

<A HREF="news.html" TARGET="bad" imgReplace.src='images/1tv.jpg';><FONT FACE="verdana,arial" size=2> HOME</B></FONT></A>

the second was :

<A HREF="news.html" TARGET="bad"><imgReplace.src='images/1tv.jpg';><FONT FACE="verdana,arial" size=2> HOME</B></FONT></A>

Sorry for being a pester man.

Cheers again

@PittimannDec 03.2003 — #Hi!

originally posted by TheBearMay:
imgReplace.src='newImagePath';[/QUOTE]
sharkey182uk, this is script code, not an HTML tag.

You have to put in in a script to get it work or attach it to an event. Example:
---------

<A HREF="news.html" TARGET="bad" onclick="javascript:imgReplace.src='images/1tv.jpg';"><FONT FACE="verdana,arial" size=2> HOME</B></FONT></A>
---------

Cheers - Pit

P.S. You'll have to delete the space between "java" and "script" behind the onclick=...

@johndoe190authorDec 03.2003 — #Hey that code didnt work either nothing comes up.

Some one suggested this might work to me.

onmouseover="changer2('img2',5,'holder',7)"

onmouseout="changer2('img2',6,'holder',1)"

Can anyone help.

Cheers again

@PittimannDec 03.2003 — #Hi!

For that last code to work you need a function called changer2(something, goes, in, here)

I am sure you don't have it. And I'm also sure you didn't do any of the things suggested by TheBearMay.

So nobody will be able to help you unless you posted the code you have completed so far...

Cheers - Pit

@johndoe190authorDec 03.2003 — #Hey i dont know anything about javascripting so when your telling me about functions im not understading.

Does anybody know what it is called what im wanting to do so i can look it up because it must be hard for yous to get what im needing.

Cheers again

@PittimannDec 03.2003 — #Hi!

Think, I got you now: you don't have anything except your href...

To accomplish what you originally asked for you could have used the code posted by TheBearMay. But you didn't. So don't wonder, if nothing works...

I altered it a bit (hoping that "when you roll over a hyperlink" in your first post means: the user moves his mouse pointer over the link):
------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled</title>

<script language="JavaScript" type="text/javascript">



</script>

</head>

<body>

<A HREF="news.html" TARGET="BAD" onMouseOver="imageDisp()" onMouseOut="imageDisp()"><FONT FACE="verdana,arial" SIZE=2> HOME</B></FONT></A>

<div id='imgDiv' style='visibility:hidden;position:absolute;left: [COLOR=limegreen]100[/COLOR];top: [COLOR=limegreen]200[/COLOR]'>

<img id='imgReplace' src="images/1tv.jpg">

</div>

</body>

</html>
------------

You can change the green numbers above to adjust the position...

Cheers - Pit

@johndoe190authorDec 03.2003 — #Hey cheers man gettin somewhere now. I have entered all the code correctly but nothing came up again. So i changed it to visible and it does come up but once you roll over the link it disappears. Ive found a page that is doing the same thing as i want. Its a tv when you roll over the links it comes up on it.

[URL]http://www.silverwing.net/scream/index02.html[/URL]

Cheers again sorry for bothering you and thanks for spending your own time helping me.

@PittimannDec 03.2003 — #You're using Netscape, aren't you???

@johndoe190authorDec 03.2003 — #No im using IE 6. Also did you look at the link.

Cheers again.

@PittimannDec 03.2003 — #I opened that page!

Can you tell me, where I have to move my mouse or where to click to get the effect you want??

@PittimannDec 03.2003 — #Hi!

I got it (just loaded very slowly the first time)! It is not dealing with visible and hidden, but with what TheBearMay suggested "If you need to change the image content simply add the line imgReplace.src='newImagePath';"

It is just exchanging the so called src of an image. So for that you do not necessarily have to have a div with all its' attributes. Depending on over which part of the menu you move the mouse pointer, the corresponding image is displayed...

Cheers - Pit

@johndoe190authorDec 03.2003 — #Yeah i think i get you

cheers

@PittimannDec 03.2003 — #Well - now that we know what you actually wanted, it should be much easier to give you a code snippet enabling you to get that effect on your page...

If you don't manage that alone, just post again. If not me, it will be somebody else to help.

Good luck - Pit

BTW - if you had posted that link when asking your original question (mentioning that THIS is what you want), this thread would still be much shorter and you much more satisfied... :p

@johndoe190authorDec 03.2003 — #Ok soz bout that i only found it today.

This is what ive got now i got it off that page.

<SCRIPT language=JavaScript>

</SCRIPT>

This gos in the head section ive altered it for my needs but i dont know what it does.

The second bit has something to do with:

<MAP name=Map><AREA

onmouseover=document.fuzz.src=scream.src title=Scream

onmouseout=document.fuzz.src=blank.src shape=RECT alt=Scream

coords=159,2,290,17

href="news.html">

But i dont understand all of that.

Cheers for your help uo to now man .

@PittimannDec 03.2003 — #Hi!

The menu on that page consists of one image (all the different links in the menu are "situated" in that image).

To use certain parts of an image for a certain action you have to create a so called image map.

If your menu is text oriented (normal hyperlinks) you don't need that map stuff.

This would be their menu with text links:
--------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled</title>

</head>

<body>

<a href="/scream/news.html" target="_top" alt="News" title="News" onMouseover="document.fuzz.src=news.src" onMouseout="document.fuzz.src=blank.src">NEWS</a><br>

<a href="/scream/downloads/" alt="Downloads" title="Downloads" onMouseover="document.fuzz.src=download.src" onMouseout="document.fuzz.src=blank.src">DOWNLOADS</a><br>

<a href="http://www.forums-silverwing.addr.com/cgi-bin/ultimatebb.cgi" target="_blank" alt="Fan Forum" title="Fan Forum" onMouseover="document.fuzz.src=board.src" onMouseout="document.fuzz.src=blank.src">BOARDS</a><br>

<a href="/scream/chat.html" alt="Chat Room" title="Chat Room" onMouseover="document.fuzz.src=chat.src" onMouseout="document.fuzz.src=blank.src">CHAT</a><br>

<a href="/scream/craven.html" alt="Wes Craven" title="Wes Craven" onMouseover="document.fuzz.src=craven.src" onMouseout="document.fuzz.src=blank.src">CRAVEN</a><br>

<a href="http://www.onelist.com/subscribe.cgi/scr3amnet" alt="Mailing List" title="Mailing List" onMouseover="document.fuzz.src=list.src" onMouseout="document.fuzz.src=blank.src">MAILING LIST</a><br>

<a href="/scream/links.html" alt="Mass Linkage" title="Mass Linkage" onMouseover="document.fuzz.src=link.src" onMouseout="document.fuzz.src=blank.src">LINKS</a><br>

<a href="/scream/email.html" alt="Email Me" title="Email Me" onMouseover="document.fuzz.src=contact.src" onMouseout="document.fuzz.src=blank.src">CONTACT</a><br>

</body>

</html>
--------------

If you were able to adjust the "head section" the rest will be easy...

Cheers - Pit

@johndoe190authorDec 03.2003 — #hey i understand all the stuff you did their man and to my unexperienced eyes looks correct. But it did not work heres my code below. I only did one of them.

<td><a href="news.html" target="bad" alt="home" title="home" onMouseover="document.fuzz.src=home.src" onMouseout="document.fuzz.src=blank.src">home</a><br></td>

Sorry dude cheers anyway

@PittimannDec 03.2003 — #Ooops - I forgot the image - put this:

<img src="menu/ani2.gif" width="202" height="123" name="fuzz">

where you need it and alter it for your needs.

You see the image has got a name (fuzz) and a source (src, ehich is menu/ani2.gif). This is the image displayed, when the page has loaded.

In the links I posted before you have events (onMouseOver) which change the source (src) of the image which's name is "fuzz".

Example: You move your mouse pointer over the "NEWS" link;

document.fuzz.src=news.src means: the source of the image in this document named "fuzz" will be changed to the source defined in the head (news.src = 'menu/s2.jpg')...

Got it??

Cheers - Pit

@johndoe190authorDec 03.2003 — #Thanks alot . Ill do that now. Just one more question though where does the <IMG ???? bit go.

Cheers for all of your help it means alot to me.

thanks

@johndoe190authorDec 03.2003 — #Its working now cheers. But it doesnt go away afterwards it just stays in the tv.

You should be awarded a gold star for your help mate.

@PittimannDec 03.2003 — #Before I forget this: You've changed blank.src in the head to somethingelse.src (change the blank.src's in the all onmouseouts to the new name)!

The <img... ...> is the image displayed at the beginning!

I don't know, how big your image is. Simplest example:

You want to have it displayed in the top left corner of the window - then you just put it immediately after the <body...> tag.

Cheers - Pit

@johndoe190authorDec 03.2003 — #Now its working. Thank you very much you were right i did call it something else. Are you a professional web developer. Because i want to be as good as you one day.

Thanks again

@PittimannDec 03.2003 — #If I compare myself with others in this forum, I am just a "small light" (direct translation from a German word - think, you understand what it means).

Concerning your prob, it was not deep knowledge on my side - just a bit of patience (of which I have more than knowledge) ?

I am an unemployed bricklayer and that should not be your goal (even though I am satisfied with my life)!!!

Cheers - Pit

@johndoe190authorDec 03.2003 — #Yeah i understand how did you learn JavaScripting do you know of any good tutorials.

@PittimannDec 03.2003 — #Sorry!

I never used tutorials. When I started, I just browsed for free scripts and tried to understand them. By that I learned enough for myself.

Just an advice: either use the search engine of these forums to find threads dealing with tutorials or start a new thread simply asking which tutorials are good.

Due to its' length and topic, maybe nobody except us will go here (to this thread) and answer that question - and I can't answer it...

Let us now close this thread - if another problems arise while you are making progress: you know that you probably will find help at this site.

Bye & all the best - Pit

Also in #JavaScript _↴

Time Validation Owl Carousel Responsive Design adding values of a dropdown menu to a text box

Success!

Help @johndoe190 spread the word by sharing this article on Twitter...

Tweet This

Need JavaScript help

27 Comments(s) _↴

You have to put in in a script to get it work or attach it to an event. Example:
---------

<A HREF="news.html" TARGET="bad" onclick="javascript:imgReplace.src='images/1tv.jpg';"><FONT FACE="verdana,arial" size=2> HOME</B></FONT></A>
---------

I altered it a bit (hoping that "when you roll over a hyperlink" in your first post means: the user moves his mouse pointer over the link):
------------

</html>
------------

This would be their menu with text links:
--------------

</html>
--------------

Also in #JavaScript _↴

Success!

Social

Version

Need JavaScript help

27 Comments(s) ↴

You have to put in in a script to get it work or attach it to an event. Example: ---------

<A HREF="news.html" TARGET="bad" onclick="javascript:imgReplace.src='images/1tv.jpg';"><FONT FACE="verdana,arial" size=2> HOME</B></FONT></A> ---------

I altered it a bit (hoping that "when you roll over a hyperlink" in your first post means: the user moves his mouse pointer over the link): ------------

</html> ------------

This would be their menu with text links: --------------

</html> --------------

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

27 Comments(s) _↴

You have to put in in a script to get it work or attach it to an event. Example:
---------

<A HREF="news.html" TARGET="bad" onclick="javascript:imgReplace.src='images/1tv.jpg';"><FONT FACE="verdana,arial" size=2> HOME</B></FONT></A>
---------

I altered it a bit (hoping that "when you roll over a hyperlink" in your first post means: the user moves his mouse pointer over the link):
------------

</html>
------------

This would be their menu with text links:
--------------

</html>
--------------

Also in #JavaScript _↴