473,320 Members | 1,945 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.

image rollover inside a table cell, please..

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">
<!-- Generated by -->
<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="Description" content="">
<script src="preview_g.js" type="text/javascript"
language="JavaScript1.2"></script> <!--// Document Script //-->

<style type="text/css"><!--
.f01 {font: 16px 'arial', helvetica, sans-serif;color:#000000; } -->
</style>
</head>
<body bgcolor="#000000" text="#000000" link="#0000ff" vlink="#800080"
alink="#ff0000" leftmargin="0" topmargin="0" onresize="OnWeResize()">
<div class="f01"
style="position:absolute;left:171;top:105;width:26 9;height:267;">
<table bordercolor="#000000" cellspacing="0" cellpadding="0"
bgcolor="#000000" border="0">
<tbody>
<tr>
<td valign="center" nowrap align="left"><font face="Arial"
color="#000000" size="2"><img src="l1.png" target="_self"></font></td>

<td valign="center" nowrap align="left"><font 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"><font 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"><font 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;width:17 9;height:53;">
<img src="preview001001.jpg" title="" alt="preview001001.jpg"
align="top" border="0" vspace="0" hspace="0">
</div>
</div>
</body>
</html>

Nov 13 '06 #1
2 2912
ASM
mi******@hotmail.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">
<!-- Generated by -->
<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="Description" content="">
<script src="preview_g.js" type="text/javascript"
language="JavaScript1.2"></script> <!--// Document Script //-->

<style type="text/css"><!--
.f01 {font: 16px 'arial', helvetica, sans-serif;color:#000000; } -->
</style>
</head>
<body bgcolor="#000000" text="#000000" link="#0000ff" vlink="#800080"
alink="#ff0000" leftmargin="0" topmargin="0" onresize="OnWeResize()">
<div class="f01"
style="position:absolute;left:171;top:105;width:26 9;height:267;">
<table bordercolor="#000000" cellspacing="0" cellpadding="0"
bgcolor="#000000" border="0">
<tbody>
<tr>
<td valign="center" nowrap align="left"><font face="Arial"
color="#000000" size="2"><img src="l1.png" target="_self"></font></td>

<td valign="center" nowrap align="left"><font 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"><font 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"><font 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;width:17 9;height:53;">
<img src="preview001001.jpg" title="" alt="preview001001.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
mi******@hotmail.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.infosystems.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

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

Similar topics

2
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?
2
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...
1
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...
5
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%"...
5
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:...
10
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
2
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...
3
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...
14
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...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
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: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
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...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
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

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.