Mouse Rollovers With Navigation?

Dayuse · Post by **Dayuse** » Fri May 28, 2004 1:31 pm

Is there a way to make a (simple) on-mouse rollover on the comic navigation links with the tags (i.e. ***todays_comics***)? If not, can someone help me with the actual code I need if I have to create the navigation?

Toxic · Post by **Toxic** » Fri May 28, 2004 3:41 pm

I know how to do rollover buttons in flash...if that helps.

Hiye · Post by **Hiye** » Fri May 28, 2004 3:44 pm

Are you talking about buttons or text? For rollover text links, I believe you'd use the same tags as you would otherwise for any other text.

For buttons, you can make them using such program (such as Flash or Imageready) and save it as previous_day.(extension), next_day, first_day, and last_day, and simply upload them into your images folder.

Dayuse · Post by **Dayuse** » Fri May 28, 2004 3:48 pm

Image links. And I mean for using rollovers (or mouse overs) with the tags for ***first_day***, ***last_day***, etc. I know how to make rollovers. I just want to know how I can associate the code with the Keenspace tags.

Sixguys · Post by **Sixguys** » Fri May 28, 2004 5:46 pm

Keenspace Gear to the rescue! http://gear.keenspace.com/scripts/rollovers.html

Short version: you replace the 4 KeenTags (***whatever***) with a call to a JavaScript (JS) function that's loaded with the page (but from a .js file). You'll need "not over (normal)" and "over" versions of all 4 tags, plus some "disabled" (for the first and last of your archive).

In the given JS file, you must replace all height/width parameters to whatever you need (they're in red).

There's another: http://gear.keenspace.com/scripts/rollovers2.html I'm not quite sure what the difference is; I'm no JS expert. This does require more image files -- that much is clear.

Either way, just follow the instructions on the linked pages. It looks pretty straightforward.

(These are not my creations; I'm just the messenger. No guarantees. Please don't hurt me.)

Dayuse · Post by **Dayuse** » Fri May 28, 2004 6:18 pm

No problem. I just wanted to know this for future reference. Right now, I don't want my site to be uber-flashy, but when the time may come...

Thanks.

FoxFang · Post by **FoxFang** » Fri May 28, 2004 7:15 pm

You can do it using adobe imageready or did I read that wrong?

Joel Fagin · Post by **Joel Fagin** » Fri May 28, 2004 7:24 pm

FoxFang wrote:You can do it using adobe imageready or did I read that wrong?

You did, yes. The problem isn't the rollovers but getting Keenspace to use them. It wasn't made with rollovers in mind.

Is it just me or does Autokeen need a massive update?

- Joel Fagin

FoxFang · Post by **FoxFang** » Fri May 28, 2004 7:38 pm

Actually it works perfectly fine on my website and I use flash. Just put the button in the public folder and make sure that the coding is pointing to the right file so it shows up.

Dayuse · Post by **Dayuse** » Sat May 29, 2004 6:34 am

Well, like I said, I know how to make rollovers. I use ImageReady.

I was just wondering if I could use the rollover function with the ***tags***...

Faub · Post by **Faub** » Tue Jun 01, 2004 1:32 pm

Short answer, no.

Long(er) answer, The nav buttons are named but do not have an id. If you were a javascript guru you might be able to pull it off. Since the code is generated, and you're using a program to make the rollovers, I think you're out of luck.

Dayuse · Post by **Dayuse** » Tue Jun 01, 2004 1:56 pm

Ah. Alright, then. That's good to know.

Lackita · Post by **Lackita** » Wed Jun 02, 2004 5:14 pm

Well I wouldn't call myself a javascript guru but I have found a way to make rollovers work.

Now the problem with image swapping is all of the tags are generated for us, but what we can do, since the images are named, is make a table with a border of 0 and a different cell for each image. Now, as properties of these individual cells we have the image swapping script.

With simple navigation the code would look something like this:

Code: Select all


<table border="0">
  <tr>
   <td onmouseover="document.first_day.src='images/first_day_visited.jpg';"
onmouseout="document.first_day.src='images/first_day.jpg';">
      ***first_day***
    </td>
    <td onmouseover="document.previous_day.src='images/previous_day_visited.jpg';" onmouseout="document.previous_day.src='images/previous_day.jpg';">
      ***previous_day***
    </td>
    <td onmouseover="document.next_day.src='images/next_day_visited.jpg';" onmouseout="document.next_day.src='images/next_day.jpg';">
      ***next_day***
    </td>
    <td onmouseover="document.last_day.src='images/last_day_visited.jpg';" onmouseout="document.last_day.src='images/last_day.jpg';">
      ***last_day***
    </td>
  </tr>
</table>

Please note that for this code to work, the image that you want the navigation buttons to transform into when the mouse is over them must be named WHATEVER_day_visited.jpg where WHATEVER is the name of the button that you're trying to swap with.

Also note that although all of this code should work, only the previous day swap has been tested.

Lackita · Post by **Lackita** » Wed Jun 02, 2004 5:46 pm

This is a little addendum to my previous post that just occured to me: You probably need to preload the images so that there's not that awkward pause the first time the mouse rolls over the button.