Change code on a different part of the page on mouseover [Archive] - HTML Forums

View Full Version : Change code on a different part of the page on mouseover

Jake302

02-15-2008, 08:20 PM

Hey, I really don't know any javascript; however, I'm pretty confident what i need is going to require it.

Okay heres what I want.

Here is my page: http://www.letarde.com/new

I need to make it so that when you mouseover a link in the main nav, the text and the image will change, based on what link you mouseover. And when you mouseoff of the links, it will go back to the "default" image and "default" text.

Also, I would like to have it be so that when you visit the page, the images that are to be changed on mouseover, will be preloaded, so there is no loadtime inbetween changing links.

I hope that made sense, it was a little hard to explain.

Thanks to anyone who can help me out.

rangana

02-15-2008, 09:20 PM

Hi jake302,
You could give this code a try:
<script type="text/javascript">
function mouseOver()
{
document.getElementById('divname').style.background = "url(mouseoverimage.gif)";
}
function mouseOut()
{
document.getElementById('divname').style.background = "url(mouseoutimage.gif)";
}
</script>

You could call those functions using onMouseOver="mouseOver()" and onMouseOut="mouseOut"

...but why use onMouseOver and onMouseOut events when you did it using hover property of CSS on your contact, sitemap and help!..

Note that some users disable javascripts :D

Jake302

02-15-2008, 09:46 PM

Because I not only want to change the image, I want to change the text right next to it.

I'm guessing that code doesn't work for changing text as well?

That's why I made the title of my topic changing "code" and not changing "img".

Could you revise the code to make it will work with changing the text as well?

Here is the code that will need to be changed:

<div class="pagetitle">Ray Ray Le Tarde's House of Cards</div>
<div class="info">   As a freelance website designer, Ray Ray Le Tarde is here to help you with all of your website needs.<br><br>Have a nice stay !</div>
</div>
<div class="rightdisplay"><img src="http://www.letarde.com/new/images/navdisplay/default.png" alt="">

I want it so that when you mouseover the link "Ray Ray Le Tarde's House of Cards" will change to the name of the link, for example, "Portfolio" or "Tutorials" and then "As a freelance website designer..." changes to a description of the page. and, the image changes to a different image.

I want all of that to change when you mouseover the link.

rangana

02-15-2008, 10:18 PM

Hi jake302,
Honestly, I don't understand, but basing on your requirements, try adding this code in the <head> </head> section:
<script type="text/javascript">
function changeLink()
{
document.getElementById('navigation').innerHTML="Did this changed?";
document.getElementById('navigation').href="http://www.google.com";
document.getElementById('navigation').target="_blank";
}
</script>

Then in the body to:
<a id="navigation" href="http://www.letarde.com/new/images/navdisplay/default.png" onMouseOver="changeLink()">
RayRay Le Tarde's House of Cards</a>

<br>

<div class="pagetitle" id="navigation">Ray Ray Le Tarde's House of Cards</div>
<div class="info">   As a freelance website designer, Ray Ray Le Tarde is here to help you with all of your website needs.<br><br>Have a nice stay !</div>
</div>
<div class="rightdisplay"><img src="http://www.letarde.com/new/images/navdisplay/default.png" alt="">

I can't get what you want, but you can see the codes as a reference :D

Jake302

02-15-2008, 10:24 PM

That's actually quite far from what I needed.

Think of it this way:

When I visit the site, I want to see this code:

<div class="pagetitle">Ray Ray Le Tarde's House of Cards</div>
<div class="info">   As a freelance website designer, Ray Ray Le Tarde is here to help you with all of your website needs.<br><br>Have a nice stay !</div>
</div>
<div class="rightdisplay"><img src="http://www.letarde.com/new/images/navdisplay/default.png" alt="">

Then, when I hover over "Home" in the main navigation, I want that code to change to this:

<div class="pagetitle">Home</div>
<div class="info">Click here to visit the Home Page</div>
</div>
<div class="rightdisplay"><img src="http://www.letarde.com/new/images/navdisplay/home.png" alt="">

(Notice that the classes "pagetitle" "info" and the image all changed.)

Then, when you mouse off, it will go back to the default (the code at the top).

Now, I want to have unique information (a unique image, a unique title, a unique description) for every link in the main nav.

Can you do that?

rangana

02-16-2008, 02:14 AM

Hi jake302,
My apologies for failing to understand it right away :D
Try this scipt on the <head> section:
<script type="text/javascript">
function change()
{
document.getElementById('pagetitle').innerHTML="Home";
document.getElementById('info').innerHTML="Click here to visit the Home Page";
document.acceptimage.src="http://www.letarde.com/new/images/navdisplay/home.png";
}
function test()
{
document.getElementById('pagetitle').innerHTML="Ray Ray Le Tarde's House of Cards";
document.getElementById('info').innerHTML="   As a freelance website designer, Ray Ray Le Tarde is here to help you with all of your website needs.<br><br>Have a nice stay !";
document.acceptimage.src="http://www.letarde.com/new/images/navdisplay/default.png";
}
</script>

...then in your HTML page, have something like:
<a href="#" onMouseOver="change()" onMouseOut="test()">HOME</a>

<div id="pagetitle" id="navigation">Ray Ray Le Tarde's House of Cards</div>
<br/>
<div id="info">   As a freelance website designer, Ray Ray Le Tarde is here to help you with all of your website needs.<br><br>Have a nice stay !</div>
</div>
<br/>
<div id="rightdisplay">
<img name="acceptimage" src="http://www.letarde.com/new/images/navdisplay/default.png" alt="">

See if it helps :D

Jake302

02-16-2008, 10:53 PM

Hey, the code worked great.

Only one thing, Is there anyway to pre-load the images, so there's no wait time inbetween changing links.

There's only a tiny wait time, but I'm sure its magnified a ton on slower browsers/internet connections.

rangana

02-16-2008, 11:28 PM

Hi jake302,

I'll be out for the next day to attend a meeting,, i'll just make it fast...
Just make a few changes on the codes i've given above...
Just add window.onload = before the function or simply
window.onload = change;
window.onload = test;

See if it helps :D

Jake302

02-17-2008, 03:03 PM

rangana

02-18-2008, 08:06 PM

The code is placed right!...Can't figure out what cause the delays. Maybe dial-up?! or a huge "file size" of the image. :D

Jake302

02-18-2008, 09:11 PM

I thought the file-size wouldn't matter, since it is being loaded at the very beginning, and not when you mouseover the link?

I want it so that while it's loading up all of my CSS, and markup and blah blah blah at the very begnining, it also loads these images. That way when you mouseover there is no wait for the images to be downloaded, they're already cached.

rangana

02-18-2008, 09:14 PM

Its basically because your images is a .png...could you have an equivalent of it in .jpg??..With the same quality...It will load much faster :D

Jake302

02-18-2008, 09:17 PM

I'm actually going over this with someone else, It would just be more hassle than it's worth simply because jpg can't handle transparency, and just about all of my images have transparency at one place or another.

rangana

02-19-2008, 02:50 AM

Well, if you really want it be transparent, then we can play with the image's opacity, but still a lot of work, or haven't you tried saving it as .gif?!. :D

Jake302

02-21-2008, 06:41 AM

I went over this in another thread, with a "gif" image, the pixels can only be transparent or not transparent, there's no inbetween, this causes aliasing in my images.

Bottom line, I need a way to preload the images that are in the function.

I'm assuming that window.onload thing preloads the function; however, not the contents of the function.

How can I preload the images?