473,560 Members | 3,043 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

image swap + restore + set

Hi all

I'm looking for a solution that can be used in a calendar/gig guide
scenario where each day is represented by a dot image. Now this dot must
do the following

1. When the mouse goes over the dot image it swaps to the mouseover dot
2. When the mouse goes out of the dot image it restores back to the
original img
3. When the img is clicked the dot image is swapped with another image
(different to the other 2) that will remain there even when the mouse
goes out of the image

I've been searching high & low for an answer but with no luck

Any gurus out there able to help ???

Cheers

Matthew
Jul 23 '05 #1
2 1877
"Matthew" <di******@hotma il.com> wrote in message
news:42******** @duster.adelaid e.on.net...
Hi all

I'm looking for a solution that can be used in a calendar/gig guide
scenario where each day is represented by a dot image. Now this dot must
do the following

1. When the mouse goes over the dot image it swaps to the mouseover dot
2. When the mouse goes out of the dot image it restores back to the
original img
3. When the img is clicked the dot image is swapped with another image
(different to the other 2) that will remain there even when the mouse goes
out of the image

I've been searching high & low for an answer but with no luck

Any gurus out there able to help ???


Try googling "javascript rollover" or "javascript image rollover"

Jul 23 '05 #2
Matthew wrote:
Hi all

I'm looking for a solution that can be used in a calendar/gig guide
scenario where each day is represented by a dot image. Now this dot must do the following

1. When the mouse goes over the dot image it swaps to the mouseover dot 2. When the mouse goes out of the dot image it restores back to the
original img
3. When the img is clicked the dot image is swapped with another image (different to the other 2) that will remain there even when the mouse goes out of the image

I've been searching high & low for an answer but with no luck

Any gurus out there able to help ???

Cheers

Matthew


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://snaught.com/JimsCoolIcons/Marbles-W/">
<style type="text/css">

table {
width: 400px;
margin: 100px auto;
border-collapse: collapse;
border: 3px #fff inset;
}
td {
font: bold 11px tahoma;
border: 1px #000 solid;
background: #fafffa;
}

</style>
<script type="text/javascript">

//::::::::::::::: ::::::::::::::: :
var overurl = 'green-glass.jpg';
var outurl = 'green.jpg';
var clickurl = 'red-glass.jpg';
//::::::::::::::: ::::::::::::::: :

function init()
{

function over()
{
if (!/red/.test(this.src) )
this.src = this.src.replac e(outurl, overurl);
}
function out()
{
if (!/red/.test(this.src) )
this.src = this.src.replac e(overurl, outurl);
}
function click()
{
this.src = clickurl;
}

var i = 0,
img,
imgs = document.getEle mentsByTagName( 'img');
while (img = imgs.item(i++))
if (img.className == 'swap')
{
img.onmouseover = over;
img.onmouseout = out;
img.onclick = click;
}
var plover = new Image().src = 'green-glass.jpg';
var plclick = new Image().src = 'red-glass.jpg';
}

window.onload = function()
{
if (document.getEl ementsByTagName )
init();
}

</script>
</head>
<body>
<table cellspacing="1" >
<tbody>
<script type="text/javascript">
document.write( '<tr>');
var d = 0;
while (d < 31)
{
if (d && d % 7 == 0)
document.write( '</tr><tr>');
document.write( '<td><img class="swap" src="green.jpg" >',++d,'</td>');
}
document.write( '<td></td><td></td><td></td>');
</script>
</tbody>
</table>
</body>
</html>

Jul 23 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
2056
by: John | last post by:
I am rotating images of different dimensions. My problem is that when a new image is displayed in a new position which had an image of a different dimension, the old image is first stretched to the dimension of the new image, before the new image is loaded. How can I stop this stretching behavior? See the banner images on the right at...
2
1978
by: Cynthia | last post by:
I'm looking for javascript code that when I mouse over a menu item will display a picture elsewhere on the page. I know it exists, but the ones I've found so far just swap out the menu item in place. Even better would be one where I can swap the menu image and display an image elsewhere on the page. Many thanks!
2
1548
by: Frank Bishop | last post by:
I have been trying to do image swaps and my second image does not show up, it just goes to a blank image on the mouseover. I have Windows XP SP2 and it prompts me to allow blocked content when the page loads and then I do allow. But the swap still does not show up, just the first image. Also, is there a more advanced example that has multiple...
2
4479
by: broms10 | last post by:
I need help. I have a little button that says "next" below a big image, let´s call it "image1", when I press the button I want to swap the big image to "image2". And then if I press it again I want it to swap to "image3" and the next time to "image4" and so on. I´m not so good at javascripts but I found a script that can make the button swap...
12
2549
by: Charlie King | last post by:
As I understand it, the use of FIR* to replace heading tags with images in visually enabled CSS browsers is now frowned upon on the basis that some screen readers will *nor* read back text that is marked up by CSS to be invisible or hidden. So... If I want to replace headings with images (because my client wants to use his specific font...
4
4216
by: bridgemanusa | last post by:
Hi All: I have a very long page of html that I want to take portions and hide them in divs, then show when a link is clicked. I have the hide show part working when the link is clicked, however I would really like to use linked images instead to do the following: - When open.gif is clicked, the contents of the div show and open.gif is...
3
4341
by: dcruncher4 | last post by:
It is possible that we may be asked to restore a production tape, say 3 yrs later. We would prefer redirect restore for that. I am documenting a process to do a redirect restore. We take production backups via Legato. The big question is that how to get information about tablespace and containers from the tape backup. A search on this told...
4
11504
by: lemat | last post by:
Hi, I use a radio button form in which users can select a color by clicking on a image. I would like this image to change to another one when it's chosen. (image with a "Chosen" Stamp in the middle) Of course I like it to be restored if hte user select another color. I've tried to add behaviour to the image (swap on click) and on the...
2
8786
by: smokeyd | last post by:
i am trying to create a simple image button rollover.. i have searched this forum and found a number of solutions but none seem to work. i am just trying to get the onmouseover to swap the image then restore when rolled out on a web page in vb.net. please can someone help?
0
7632
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
8066
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7596
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7920
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6191
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5458
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3605
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
2047
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1169
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.