image rollover inside a table cell, please..

mix2plix

ok.. been bangin by brains the past few days with this one and decided
to seek you'z help. so here ya go. based on the code below and this
concept.. how should i proceed?

I have a table of 4 equal squares in which i've placed 4 equal sized
pictures. now i'd like to create a link on the 4 pictures and have
them change pictures when the mouse is over them. (rollover)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="en">
<head>
<titlePreview ; Page 1 of 1 </title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css;">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Descripti on" content="">
<script src="preview_g. js" type="text/javascript"
language="JavaS cript1.2"></script> 

<style type="text/css">
</style>
</head>
<body bgcolor="#00000 0" text="#000000" link="#0000ff" vlink="#800080"
alink="#ff0000" leftmargin="0" topmargin="0" onresize="OnWeR esize()">
<div class="f01"
style="position :absolute;left: 171;top:105;wid th:269;height:2 67;">
<table bordercolor="#0 00000" cellspacing="0" cellpadding="0"
bgcolor="#00000 0" border="0">
<tbody>
<tr>
<td valign="center" nowrap align="left"><f ont face="Arial"
color="#000000" size="2"><img src="l1.png" target="_self"> </font></td>

<td valign="center" nowrap align="left"><f ont face="Arial"
color="#000000" size="2"><img height="133" src="c1.png" target="_self"
width="133" border="0"></font></td></tr>
<tr>
<td valign="center" nowrap align="left"><f ont face="Arial"
color="#000000" size="2"><img height="133" src="d1.png" target="_self"
width="133" border="0"></font></td>
<td valign="center" nowrap align="left"><f ont face="Arial"
color="#000000" size="2"><img height="133" src="s1.png" target="_self"
width="133" border="0"></font></td></tr></tbody>
</table>
</div>
<div style="position :absolute;left: 216;top:382;wid th:179;height:5 3;">
<img src="preview001 001.jpg" title="" alt="preview001 001.jpg"
align="top" border="0" vspace="0" hspace="0">
</div>
</div>
</body>
</html>

Nov 13 '06 #1

Subscribe Reply

2934

ASM

mi******@hotmai l.com a écrit :

ok.. been bangin by brains the past few days with this one and decided
to seek you'z help. so here ya go. based on the code below and this
concept.. how should i proceed?

Could you explain why you have to write so ugly html code ?
Why to use table ?
Why to put this table in a div ?
Why td nowrap + align left ?
Why having tag font to finally show only one image ?
Why to use css if it is to style body via html ?

What is the use of target in an img tag ?
What is the utility to repeat the src of tag img in its alt ?

I have a table of 4 equal squares in which i've placed 4 equal sized
pictures. now i'd like to create a link on the 4 pictures and have
them change pictures when the mouse is over them. (rollover)

And what there is in 'preview_g.js' ?

One link grouping all 4 images together ?
Or only a rollover on each picture ?

Where are and which are the images of replacement?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="en">
<head>
<titlePreview ; Page 1 of 1 </title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css;">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Descripti on" content="">
<script src="preview_g. js" type="text/javascript"
language="JavaS cript1.2"></script> 

<style type="text/css">
</style>
</head>
<body bgcolor="#00000 0" text="#000000" link="#0000ff" vlink="#800080"
alink="#ff0000" leftmargin="0" topmargin="0" onresize="OnWeR esize()">
<div class="f01"
style="position :absolute;left: 171;top:105;wid th:269;height:2 67;">
<table bordercolor="#0 00000" cellspacing="0" cellpadding="0"
bgcolor="#00000 0" border="0">
<tbody>
<tr>
<td valign="center" nowrap align="left"><f ont face="Arial"
color="#000000" size="2"><img src="l1.png" target="_self"> </font></td>

<td valign="center" nowrap align="left"><f ont face="Arial"
color="#000000" size="2"><img height="133" src="c1.png" target="_self"
width="133" border="0"></font></td></tr>
<tr>
<td valign="center" nowrap align="left"><f ont face="Arial"
color="#000000" size="2"><img height="133" src="d1.png" target="_self"
width="133" border="0"></font></td>
<td valign="center" nowrap align="left"><f ont face="Arial"
color="#000000" size="2"><img height="133" src="s1.png" target="_self"
width="133" border="0"></font></td></tr></tbody>
</table>
</div>
<div style="position :absolute;left: 216;top:382;wid th:179;height:5 3;">
<img src="preview001 001.jpg" title="" alt="preview001 001.jpg"
align="top" border="0" vspace="0" hspace="0">
</div>
</div>
</body>
</html>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date

Nov 14 '06 #2

RobG

mi******@hotmai l.com wrote:

ok.. been bangin by brains the past few days with this one and decided
to seek you'z help. so here ya go. based on the code below and this
concept.. how should i proceed?

Ditch the hideous HTML, upgrade to HTML 4.01 strict. Just about all
the attributes you added are deprecated and shouldn't be used.

Rollovers should be implemented using pure CSS based on the
instructions here:

<URL: http://www.alistapart.com/articles/slidingdoors2/ >

In your case, join the two images side-by-side so that you have a
single 266x133px image. Now set the size of your table cell to
133x133. Use an A element to fill the cell and set its background
image to be the image you want using CSS and so that only one half is
visible.

Set the :hover pseudo-class to move the image -133px to display the
other half. No script required. When enough people are finally using
IE and you can use hover on all (or at least most) elements, then you
can ditch the A element and set the hover attribute of the table cell
itself.

If you want to be really hip, replace the table cells with divs and let
the design flow - the CSS purists will love you for it.

Ask followup questions at:

news:comp.infos ystems.www.authoring.stylesheets
<URL:
http://groups.google.com.au/group/co...ng.stylesheets

>

Here's a rough sample:

<style type="text/css">
#picSet {
list-style: none;
display: inline;
}

#picSet li {
float: left;
border: 1px solid blue;
}

#picSet a {
text-decoration: none;
background:url( "a.gif");
display: block;
width: 75px; height: 58px;
}

#picSet a:hover{
background-position: -75px;
}

</style>

<ul id="picSet">
<li><a href="#"></a>
<li><a href="#"></a>
<li><a href="#"></a>
<li><a href="#"></a>
</ul>
Where a.gif is two 75x58px images side-by-side.
--
Rob

Nov 14 '06 #3

Similar topics

2119

onCLick on TD only works on image inside TD

by: TnaG | last post by:

I have an onClick on a TD. If I click on an image inside the TD, the onClick fires, however if i click anywhere else inside the TD nothing happens. Any ideas?

Javascript

1993

Seeking javascript image displayer

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!

Javascript

2700

Caption on an image using CSS

by: Eric | last post by:

I want to do the following using CSS, and I just can't seem to find the solution: There is some text here that describes some research or something that I'm doing. Part of the results of the research is a graph that I want to display as Figure 1. +---------------------+ | | | |

HTML / CSS

116809

<td> with background image - what's the right way?

by: Derek Fountain | last post by:

I have a horizontal navigation bar, which is a single row table containing the right images. It "stretches" itself across the screen using a penultimate td like this: <td width="100%" background="images/nav_bar/nb_spacer.gif"> </td> which works in all major browsers that I've tried, but doesn't validate. No background attribute to the td tag, apparently. What is the correct way to do this? A stylesheet entry with a

HTML / CSS

5180

Image rollover not working in a table

by: jedbob | last post by:

I used Adobe Imageready to build a simple rollover navigation bar, where the text will change color on a mouse over. The working example can be found at: http://www.akujunkan.com/test/NavBar.html However, when I try to incorporate the javascript and code into another table, the rollover stops working: http://www.akujunkan.com/test/index.html

HTML / CSS

4723

Want to creat rollover image to larger

by: Rock | last post by:

Hi, I want to create this.. A 2 col table with 3 rows down. In the 1st col I want three thumb size images, 1 in each row When an image is rolled on, the larger image shows up in col 2

Javascript

2985

Image preloading and onmouseover/out questions

by: sachaburnett | last post by:

Hi everyone! I'm new to Javascript and am finding so much useful information on this group, so thanks to you all! I have a question about preloading images for onmouseover/out effects and found so many different ways to do it on the Net but am not sure about something. Right now I have the following code inside my <head> tag:

Javascript

5571

Adding a clickable button or text into a image with GD

by: crazychrisy54 | last post by:

Hi there I just wondered if there is any way using GD to insert a clickable button or some clickable text into a image? It is possible to create images for buttons but what if you want a clickable button *inside* another image. I don't know if this is along the right lines but the following code puts a image inside another image. Perhaps I could then make im2 clickable or is it just not possible? Any help would be very much

PHP

4181

Image Positioning Inside Table Problem (IE only)

by: Thomas J | last post by:

Hello Developers! I am pulling my hairs out. IE adds extra space below an image when I align it at the bottom inside a table cell. Firefox and Opera render as expected. Simple example available at http://my-picture-store.com/test/panelboxtest.htm Any ideas? cellspacing and cellpadding is already set to zero.

HTML / CSS

9636

What is ONU?

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 usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9474

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10306

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10139

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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 captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10075

The easy way to turn off automatic updates for Windows 10/11

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 most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

7485

Access Europe - Using VBA to create a class based on a table - Wed 1 May

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 instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5373

Trying to create a lan-to-lan vpn between two differents networks

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 the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4037

transfer the data from one system to another through ip address

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

C# / C Sharp

2869

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General