Want to creat rollover image to larger

[Rock]

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

In other words when a thumb is rolled on, its larger image is shown in another
area of the table.

Any help please?

Can do the replace small image with larger okay, but they are in the same position.

I am trying to duplicate something like this..

http://cgi.ebay.com.au/ws/eBayISAPI.../search.dll?from=R40&satitle=6622724288&fvi=1


Thanks

Rock

 

[Ehsan]

Hi Rock,

Following are two javascript functions that you will require:

<script language="javascript">
function showbigimage(colid, imgName)
{
document.getElementById(colid).innerHTML = "<img src='"+imgName+"'>";
}

function hidebigimage(colid)
{
document.getElementById(colid).innerHTML = "";
}
</script>

Here is the HTML table that you will want:

<table border=1>
<tr><td><img src=i1.jpg onmouseover='showbigimage("big1",
"i1_big.jpg")' onmouseout='hidebigimage("big1")'></td>
<td id='big1'></td></tr>
<tr><td><img src=i2.jpg onmouseover='showbigimage("big2",
"i2_big.jpg")' onmouseout='hidebigimage("big2")'></td>
<td id='big2'></td></tr>
<tr><td><img src=i3.jpg onmouseover='showbigimage("big3",
"i3_big.jpg")' onmouseout='hidebigimage("big3")'></td>
<td id='big3'></td></tr>
</table>

Hope this helps

Thanks and God Bless!!

Ehsan
http://ehsan.bdwebwork.com

 

[Rock]

Thanks Ehsan,

Appreciate the trouble you went to.

It is what I wanted. Now to look at the code so I can understand it.

Regards,

Rock

in OZ.

 

[ASM]

Rock a écrit :

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

is it difficult because you need to pre-charge all images

best way would to have all images on the page
some of then styled in invisible

<style type="text/css">
#visual img { position:absolute; visibility: hidden;}
img#bigest { position: relative }
#visual img.show { visibility: visible }
</style>
<script type="text/javascript">
function hidImages() {
var P = document.getElementById('visual').getElementsByTagName('IMG');
for(var i=0;i<P.length;i++) P.className = '';
}
function showImage(pictIndex) {
var P = document.getElementById('visual').getElementsByTagName('IMG');
P[pictIndex-1].className = 'show';
}
</script>

<table>
<tr>
<td>
<img src="thumb/p1.jpg"
onmouseover="showImage(1)" onmouseout="hidImages()">
<img src="thumb/p2.jpg"
onmouseover="showImage(2)" onmouseout="hidImages()">
<img src="thumb/p3.jpg"
onmouseover="showImage(3)" onmouseout="hidImages()">
</td>
<td id="visual">
<img src="photos/p1.jpg">
<img src="photos/p2.jpg" id="bigest">
<img src="photos/p3.jpg">
</td>
</tr>
</table>

in this example your bigest image would be photos/p2.jpg
and you give to it the id 'bigest'
to arrange size of the td to this size

 

[Ehsan]

Hi Stephane,

Setting out "visiblity" property will occupy the space even the image
is not being shown/kept hidden, i.e. in the column even if the image is
hidden it will still show the YxY space occupied (width and height of
the image). I think setting "display" property instead will be fine, if
Rock wants to play around with CSS. Am I right?

<style type="text/css">
#visual img { position:absolute; display: none;}
img#bigest { position: relative }
#visual img.show { display: inline }
</style>

Thanks,

Ehsan

 

[ASM]

Ehsan a écrit :

Hi Stephane,

Setting out "visiblity" property will occupy the space

but as images are in absolute, they would occupy same space
(not more space than bigest image with its own style)

on my idea : visibility is a correct use here

<style type="text/css">

perhaps would it miss :

#virtual { position: relative; }

 

[Ehsan]

Hi Stephane,

Can you please check out the following two links. One is using your
code, I have only changed the filenames and added a table border. And
one is using your code but display property. You will see the second
column on visibility.html shows a space (i.e. the size of image(s) it
contains. On the other hand display.html does not show the space
occupied.

Please write your views on it.

On display.html I have changed the following line:

#visual img { position:absolute; visibility: hidden;}

to

#visual img { position:relative; display: none;}

Making absolute to relative.

http://ehsan.bdwebwork.com/tests/visibility.html
http://ehsan.bdwebwork.com/tests/display.html

Thanks,

Ehsan

 

[ASM]

Hi Ehsan,

you're right :-(
this css are sometimes suprising ...

#visual img { position:relative; display: none;}

http://ehsan.bdwebwork.com/tests/display.html

is much more most better.

http://ehsan.bdwebwork.com/tests/visibility.html

could run but 'visual' containing all big images
would have to be a div inside the td
and we lost somme TD's automatisms in centrage (centering?)

 

[Ehsan]

There are few more suprises with CSS, even with "display" property. I
have seen, if you set a "display" property for <td> and toggle with
showing the <td> and hidding it, eventually it keeps creating a space
before the <td> space. When it hides a small space before the cell gets
created. If you anyway have to hide the whole <td>, you must start
another table inside the td and set property for the <table> tag.

Anyway if you (Stephane) or anyone else comes up with a solution to
"visibility" property, please post it here.

Thanks and God Bless!!

Ehsan
http://ehsan.bdwebwork.com

 

[ASM]

Ehsan a écrit :

There are few more suprises with CSS, even with "display" property. I
have seen, if you set a "display" property for <td>

css for TABLEs TRs and TDs are special
you don't use {display: block} to get them back

http://www.w3.org/TR/CSS21/indexlist.html#index-t
http://www.w3.org/TR/CSS21/tables.html#value-def-table-cell

Important :
http://www.w3.org/Style/CSS/
http://www.w3.org/TR/CSS21/

Bookmark this :
http://www.w3.org/TR/CSS21/indexlist.html
and put it in your browser's buttons bar

Anyway if you (Stephane) or anyone else comes up with a solution to
"visibility" property, please post it here.

it is not only a question of visibility, but of positionning too

http://stephane.moriaux.perso.wanadoo.fr/truc/eshan_visibility.htm
http://stephane.moriaux.perso.wanadoo.fr/truc/eshan_visibility_variant.htm

Thanks and God Bless!!

I think God is for nothing about miraculous css

 

[Ehsan]

Great, thanks for the information.

Ehsan