Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

rollover images


  • Please log in to reply

#1
silencedmessage

silencedmessage

    Member

  • Member
  • PipPipPip
  • 987 posts
ok, i have gotten a lot of help with how to use rollover images

now, im completely new to this concept (as far as coding it goes), and i dont know much about javascript

i know a fair amount of HTML but nothing impressive

what i want to be able to do is use the rollover image effect using javascript/html

i have that, but the way im using it, i want the mouseover image to remain when the page its linked to is active in the ifram below it

i have not been able to find anything on this, and i fear that i might have to use flash? which i dont know the first thing about and im not nearly ready to take on that challenge.... :whistling:

the following is the codes that are on my website:

<script TYPE="text/javascript">

var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</SCRIPT>
<html>
<title>Watch Your Head Studio</title>
<body>
<center>
<table border="0">
<tr>
<td colspan="6"><img src="header.jpg"></td>
</tr>
<tr>
<td align="center"> &nbsp
<a href="home.html" target="iframe"
onMouseOver = "rollover('home')"
onMouseOut = "rollout('home')"
><font size="3" face="Monotype Corsiva">Home</a>
<script TYPE="text/javascript">
<!--
setrollover("activelink.jpg");
//-->
</SCRIPT> &nbsp &nbsp</td>
<td align="center"> &nbsp
<a href="rates.html" target="iframe"
onMouseOver = "rollover('rates')"
onMouseOut = "rollout('rates')"
><font size="3" face="Monotype Corsiva">Rates</a>
<script TYPE="text/javascript">
<!--
setrollover("activelink.jpg");
//-->
</SCRIPT> &nbsp &nbsp</td>
<td align="center"> &nbsp
<a href="samples.html" target="iframe"
onMouseOver = "rollover('samples')"
onMouseOut = "rollout('samples')"
><font size="3" face="Monotype Corsiva">Samples</a>
<script TYPE="text/javascript">
<!--
setrollover("activelink.jpg");
//-->
</SCRIPT></td>
<td align="center"> &nbsp
<a href="bands.html" target="iframe"
onMouseOver = "rollover('bands')"
onMouseOut = "rollout('bands')"
><font size="3" face="Monotype Corsiva">Bands</a>
<script TYPE="text/javascript">
<!--
setrollover("activelink.jpg");
//-->
</SCRIPT> &nbsp &nbsp</td>
<td align="center">
<a href="testaments.html" target="iframe"
onMouseOver = "rollover('testamonies')"
onMouseOut = "rollout('testamonies')"
><font size="3" face="Monotype Corsiva">Testaments</a>
<script TYPE="text/javascript">
<!--
setrollover("activelink.jpg");
//-->
</SCRIPT></td>
<td align="center">
<a href="contact.html" target="iframe"
onMouseOver = "rollover('contact')"
onMouseOut = "rollout('contact')"
><font size="3" face="Monotype Corsiva">Contact</a>
<script TYPE="text/javascript">
<!--
setrollover("activelink.jpg");
//-->
</SCRIPT></td>
</tr>



<tr>
<td align="center">
<a href="home.html" target="iframe"
onMouseOver = "rollover('home')"
onMouseOut = "rollout('home')"
><img src="inactivelink.jpg" name="home" border=0 height="105"></a>
<script TYPE="text/javascript">
<!--
setrollover("activelink.jpg");
//-->
</SCRIPT>
</td>
<td align="center">
<a href="rates.html" target="iframe"
onMouseOver = "rollover('rates')"
onMouseOut = "rollout('rates')"
><img src="inactivelink.jpg" name="rates" border=0 height="105"></a>
<script TYPE="text/javascript">
<!--
setrollover("activelink.jpg");
//-->
</SCRIPT>
</td>
<td align="center">
<a href="samples.html" target="iframe"
onMouseOver = "rollover('samples')"
onMouseOut = "rollout('samples')"
><img src="inactivelink.jpg" name="samples" border=0 height="105"></a>
<script TYPE="text/javascript">
<!--
setrollover("activelink.jpg");
//-->
</SCRIPT>
</td>
<td align="center">
<a href="bands.html" target="iframe"
onMouseOver = "rollover('bands')"
onMouseOut = "rollout('bands')"
><img src="inactivelink.jpg" name="bands" border=0 height="105"></a>
<script TYPE="text/javascript">
<!--
setrollover("activelink.jpg");
//-->
</SCRIPT>
</td>
<td align="center">
<a href="testaments.html" target="iframe"
onMouseOver = "rollover('testamonies')"
onMouseOut = "rollout('testamonies')"
><img src="inactivelink.jpg" name="testamonies" border=0 height="105"></a>
<script TYPE="text/javascript">
<!--
setrollover("activelink.jpg");
//-->
</SCRIPT>
</td> <td align="center">
<a href="contact.html" target="iframe"
onMouseOver = "rollover('contact')"
onMouseOut = "rollout('contact')"
><img src="inactivelink.jpg" name="contact" border=0 height="105"></a>
<script TYPE="text/javascript">
<!--
setrollover("activelink.jpg");
//-->
</SCRIPT>
</td>
</tr>
<tr>
<td colspan="6" align="center">
<iframe name="iframe" height="400" width="500" src="home.html" frameborder="1"></iframe>
</td>
</tr>
</table>



</body>
</html>




the address is www.watchyourheadstudio.be


and yes i know it sucks ATM but i just wanna get the basic layout done before i continue on with the graphics and such


id really appreciate any help anyone can give me



thanks in advance
  • 0

Advertisements


#2
Comnir

Comnir

    Member

  • Member
  • PipPipPip
  • 141 posts
When you do rollOut, before changing the image, check that
(page displayed in the frame) is different from (page in frame). If false, change the image. In addition, you should add a procedure which "rolles out" all images when you click another link. When you do this, don't forget to leave out the image that was clicked.

Hope what I said is understandable. If not, just say so and I will try to write it more clearly :-).
  • 0

#3
thenotch

thenotch

    Member

  • Retired Staff
  • 667 posts
Use CSS instead of Javascript for rollovers:

http://www.tutorio.c...image-rollovers
http://www.designmem...s/cssrollovers/
http://www.webcredib...r-buttons.shtml
  • 0

#4
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
As thenotch said use css your javascript dose not work in a few other browsers I tested it on.
Another link to look at
http://www.search-th...er_buttons.aspx

I think the best way to get each image "active" when you are on that page is to make each page its own and remove the iframe, iframes are not a good idea at all.
  • 0

#5
silencedmessage

silencedmessage

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 987 posts
alright, thanks for the input everyone

but i was talkin to a friend who does HTML for a living, and got him to agree to help me out with this, hes going to try to show my dynamic HTML and explain how to do it using CSS and make graphics for me...eventually


thanks again
  • 0

#6
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
Good to see you found an solution, even if it was not what I expected.

I was going to tell you to use php (dynamic HTML, I think that is what he is talking about) I do something simular with php on my site. But it can be tricky doing so via a forum.
  • 0

#7
knexor2

knexor2

    Member

  • Member
  • PipPip
  • 28 posts

Good to see you found an solution, even if it was not what I expected.

I was going to tell you to use php (dynamic HTML, I think that is what he is talking about) I do something simular with php on my site. But it can be tricky doing so via a forum.


Rollovers using PHP? I'm interested....
  • 0

#8
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
You still have to use css to get the rolover, I was thinking of the useing php to keep the image active once the picture has been clicked. Sorry for getting you excited.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP