image rollover inside a table cell, please..

mix2plix · Nov 13, 2006

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>
<title> Preview ; 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> 

<style type="text/css">
</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:269;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:179;height:53;">
<img src="preview001001.jpg" title="" alt="preview001001.jpg"
align="top" border="0" vspace="0" hspace="0">
</div>
</div>
</body>
</html>

ASM · Nov 14, 2006

(e-mail address removed) 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?

RobG · Nov 14, 2006

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/comp.infosystems.www.authoring.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.

Please Help?	0	Jul 23, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023
Image shifts to the right when export the page to pdf	4	May 5, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
Help with my responsive home page	2	Dec 14, 2022
Please help,i dont know why the image doesnt follow the image rules	1	Sep 14, 2021

image rollover inside a table cell, please..

mix2plix

ASM

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads