NEWBIE: Whats this Java Called?

[GOPED]

https://www.hosting.com

Put your mouse over dedicated server and the other link. It has some kind of roll over. But the imager stays in the same place while changing?
Can anyone link me to this java on a site or what it is called?

I am not talking about this kind of java, image swap.
http://www.hosting.com/dedicated.jsp at the top

thanks so much!!!

[A1ien51]

okay what are you talking about??

When you click over those four things, it does 2 things
1) Changes link color...CSS a:hover
2)Image Swap done with javascript not hard
FormName.ImageName.src='blah.jpg';

What do you want to know exactly??

A1ien51

[GOPED]

I want to make the same thing..but i don't know what that is called....
I want to make like cd button....then when the users puts his mouse over cds....in the box a picture of cd's will show...then when he puts his mouse over cs player..a cd player picture will appear in the same box....

[Guardian23]

First off, there is no text in the link, it's an image, and only an image.

What they did (view Script under the "Navigations Table" Comment tag), is change the image source with JavaScript using the onmouseover and onmouseout JavaScript event handlers, which you can read more about Here, under the "Understanding Event Handlers" section.

And to do the stuff you want, you could use the <DIV> tag or do what it says in Accessing Images and Rollovers section.

Guardian

If your new to JavaScript, the best place on the net(if you ask me) to go, is the www.wsabstract.com (Which is also the Administrator's) Web Site.
If your not, when you see something interesting, view it's source and then experiment with it, I find that helps in the understanding of JS(and HTML)...

[GOPED]

Hmm thanks

is this easy to a beginner? this source

[Guardian23]

I don't Script for others often, but try this:


<A href="cds.html" onmouseover="function1(cds)"
onmouseout="function1(DEFAULT_PIC)"> //onmouseout returns Picture to DEFAULT, this may or may not be desired...
CDS
</A>
//don't actually insert a return carriage in the tags, I just did it for clarity
<A href="cdplayer.html" onmouseover="function1(cdp)"
onmouseout="function1(DEFAULT_PIC)">
CDPLAYER
</A>

<IMG NAME="NAME" SRC="DEFAULT_PIC"></IMG>
//insert comment tags in SCRIPT if desired, but whatever

<SCRIPT>
function function1(IMGNAME){
document.NAME.src=IMGNAME+".XXX" /*NAME and IMGNAME may have to be defined, I don't do this type of function often*/
}
</SCRIPT>

Guardian,

PS: Welcome to dump(comment negatively) on this SCRIPT, All Input is welcome

[Azzkika]

hey,

the effect you're talking about could be done with a straight rollover function on one image place.

something like this:

<script>
mainImage = new Image();
image1 = new Image();
image2 = new Image();

mainImage.src = "someURL/mainImage.gif"
image1.src = "someURL/somePic.gif"
image2.src = "someURL/anotherPic.gif"

//the above ensures that all images and referenced and loaded into memory so that the function below knows what to change.

function changeImage(imagePlace,ImageName)
{ if (document.images)
{ document[imagePlace].src = eval(ImageName+".src") }
}
</script>

And then in the body of the HTML place your main image and give it a name - say <img name="mainImage" src="someImage.gif">

When you place the images that act as links, add the rollover code to onMouseOver and onMouseOut - something like this:

<A href="somelink.html" onMouseOver="changeImage('mainImage','image1')" onMouseOut="changeImage('mainImage','mainImage')>
<img src="someImage.gif">
</a>

<A href="somelink.html" onMouseOver="changeImage('mainImage','image2')" onMouseOut="changeImage('mainImage','mainImage')>
<img src="anotherImage.gif">
</a>

The important point to note is that the image place value does not change - this means that the script will substitute a new image in the single location on the screen for whatever link is rolled over.

I hope that all made sense ...

good luck

Azz