Need JavaScript help [Archive]

Click to See Complete Forum and Search --> : Need JavaScript help

sharkey

12-02-2003, 12:10 PM

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.

TheBearMay

12-02-2003, 12:19 PM

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.

sharkey

12-02-2003, 12:24 PM

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

TheBearMay

12-02-2003, 01:00 PM

Something similiar to:

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

If you need to change the image content simply add the line
imgReplace.src='newImagePath';

sharkey

12-02-2003, 04:23 PM

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

Pittimann

12-03-2003, 02:39 AM

Hi!
originally posted by TheBearMay:
imgReplace.src='newImagePath';
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=...

sharkey

12-03-2003, 07:59 AM

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

Pittimann

12-03-2003, 08:16 AM

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

sharkey

12-03-2003, 08:23 AM

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

Pittimann

12-03-2003, 08:50 AM

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: 100;top: 200'>
<img id='imgReplace' src="images/1tv.jpg">
</div>
</body>
</html>
------------
You can change the green numbers above to adjust the position...

Cheers - Pit

sharkey

12-03-2003, 09:03 AM

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.

http://www.silverwing.net/scream/index02.html

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

Pittimann

12-03-2003, 09:30 AM

You're using Netscape, aren't you???

sharkey

12-03-2003, 09:34 AM

No im using IE 6. Also did you look at the link.

Cheers again.

Pittimann

12-03-2003, 09:39 AM

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

Pittimann

12-03-2003, 09:50 AM

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

sharkey

12-03-2003, 10:02 AM

Yeah i think i get you

cheers

Pittimann

12-03-2003, 10:15 AM

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

sharkey

12-03-2003, 10:22 AM

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 .

Pittimann

12-03-2003, 10:50 AM

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

sharkey

12-03-2003, 10:59 AM

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

Pittimann

12-03-2003, 11:00 AM

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

sharkey

12-03-2003, 11:03 AM

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

sharkey

12-03-2003, 11:07 AM

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.

Pittimann

12-03-2003, 11:13 AM

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

sharkey

12-03-2003, 11:18 AM

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

Pittimann

12-03-2003, 11:22 AM

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

sharkey

12-03-2003, 11:24 AM

Yeah i understand how did you learn JavaScripting do you know of any good tutorials.

Pittimann

12-03-2003, 11:37 AM

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