469,649 Members | 1,313 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,649 developers. It's quick & easy.

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 2754
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 discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Cynthia | last post: by
1 post views Thread by Eric | last post: by
5 posts views Thread by Derek Fountain | last post: by
5 posts views Thread by jedbob | last post: by
10 posts views Thread by Rock | last post: by
2 posts views Thread by sachaburnett | last post: by
3 posts views Thread by crazychrisy54 | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.