473,320 Members | 2,112 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Rollover images without flash

I found this site:

http://k10k.net/

Notice how the top menu has rollover images without flash. How is this done?

Thanks.
Feb 28 '08 #1
6 1646
Logician
210 100+
I found this site:

http://k10k.net/

Notice how the top menu has rollover images without flash. How is this done?.
Rollover images without flash are commonplace. The particular visual effect is probably just an animated .gif
Feb 28 '08 #2
Rollover images without flash are commonplace. The particular visual effect is probably just an animated .gif
If you look closely, it uses javascript. I just want to know how it's done. (it's clearly not an animated .gif - http://k10k.net/sections/menu/)
Feb 28 '08 #3
gits
5,390 Expert Mod 4TB
hi ...

i hadn't a deep look at it seems to be a js-fade-in effect that is triggered by a click ... what is not to hard to code :) let me give you an example (just tested in firefox):

[HTML]
<html>
<head>
<style type="text/css">
.base { background: black; color: white; border: 1px black black; }
</style>
<script type="text/javascript">
function fade_in(obj) {
var c = 0;
var o = document.createElement('div');

o.innerHTML = obj.innerHTML;

o.style.background = 'red';
o.style.border = '1px solid white';
o.style.position = 'fixed';
o.style.top = obj.offsetTop;
o.style.left = obj.offsetLeft;
o.style.height = c + 'px';

obj.appendChild(o);

var resize_obj = function() {
c++;

if (c >= obj.offsetHeight - 1) {
window.clearInterval(intv);
}

o.style.height = c + 'px';
};

var intv = window.setInterval(resize_obj, 1);
}
</script>
</head>
<body>
<div onclick="fade_in(this);" class="base">
test
</div>
</body>
</html>
[/HTML]
kind regards
Feb 28 '08 #4
It still does not seem to work. I get a lot of bugs when I try to do that. Any other ideas?
Feb 29 '08 #5
gits
5,390 Expert Mod 4TB
It still does not seem to work. I get a lot of bugs when I try to do that. Any other ideas?
the given example works in FF without any error ... what do you use?

kind regards
Feb 29 '08 #6
Rollovers without flash is a common thing on the net, as someone said earlier. There is the posssibility to accomplish this from CSS. There is a video tutorial on [removed] that might help you.
Jul 3 '08 #7

Sign in to post your reply or Sign up for a free account.

Similar topics

5
by: Brian Angliss | last post by:
I'm relatively new to scripting in JavaScript, so I'm not too surprised I'm having difficulty scripting up an animation effect for my personal site. What I'm trying to do is the following: When...
4
by: Matt | last post by:
i know more-or-less zero about javascript, but my client wants a rollover and he created this code, which doesn't work. All comments are appreciated. 1. the tag: <td align="center" width="66"...
3
by: JOSEPHINE ALVAREZ | last post by:
I have this code that I want to use to do a rollover. However, because the company I am doing it for is continually changing the text, I want to be able to use dynamic text to change the text on...
1
by: Mike P | last post by:
what is the syntax for adding a rollover button as an image button? I have saved the button as a .swf file and put it as the ImageUrl, but since it isn't an image, do I need to save it as an image...
2
by: eholz1 | last post by:
Hello CSS and StyleSheet members, I have decided to move away from Dreamweaver javascript rollover buttons, in favor of a CSS type rollover button. (hope that is ok). I plan to use PHP to...
4
by: somnamblst | last post by:
I am asking this in javascript and not actionscript because I think the js portion more crucial. I have a viewable area in a SWFcalled box_mc on frame1 that is 300x100 until a rollOver event when it...
3
by: Oriane | last post by:
Hi there, I would like to handle a "rollover" <asp:Buttonin the code behind with C# with this kind of code: Button btn = Page.FindControl("Button" + numWidget) as Button; btn.Attributes =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.