Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Want to creat rollover image to larger

Reply
Thread Tools

Want to creat rollover image to larger

 
 
Rock
Guest
Posts: n/a
 
      04-22-2006
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....4288%26fvi%3D1


Thanks

Rock
 
Reply With Quote
 
 
 
 
Ehsan
Guest
Posts: n/a
 
      04-22-2006
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

 
Reply With Quote
 
 
 
 
Rock
Guest
Posts: n/a
 
      04-22-2006
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.


Ehsan wrote:
> 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
>

 
Reply With Quote
 
ASM
Guest
Posts: n/a
 
      04-22-2006
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').getElementsByTag Name('IMG');
for(var i=0;i<P.length;i++) P[i].className = '';
}
function showImage(pictIndex) {
var P = document.getElementById('visual').getElementsByTag Name('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


--
Stephane Moriaux et son [moins] vieux Mac
 
Reply With Quote
 
Ehsan
Guest
Posts: n/a
 
      04-22-2006
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

 
Reply With Quote
 
ASM
Guest
Posts: n/a
 
      04-22-2006
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; }

--
Stephane Moriaux et son [moins] vieux Mac
 
Reply With Quote
 
Ehsan
Guest
Posts: n/a
 
      04-22-2006
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

 
Reply With Quote
 
ASM
Guest
Posts: n/a
 
      04-22-2006
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?)


--
Stephane Moriaux et son [moins] vieux Mac
 
Reply With Quote
 
Ehsan
Guest
Posts: n/a
 
      04-23-2006
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

 
Reply With Quote
 
ASM
Guest
Posts: n/a
 
      04-23-2006
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.ht...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.wanado...visibility.htm
http://stephane.moriaux.perso.wanado...ty_variant.htm

> Thanks and God Bless!!


I think God is for nothing about miraculous css


--
Stephane Moriaux et son [moins] vieux Mac
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Rollover Image Appearing Where I Don't Want It? Vik Rubenfeld HTML 8 01-28-2008 01:32 AM
rollover image (but image is a php document) Dan Javascript 3 05-05-2007 07:46 AM
Intermittent image display problem within 179 image rollover Mark Szlazak Javascript 3 04-25-2006 06:32 PM
Question: Can I make textarea larger (larger text)? Peter Williams HTML 1 06-03-2005 08:17 AM
20" LCD: setting 4 g Larger text in all Programs? and larger icons lbbss Computer Support 6 04-14-2005 05:46 PM



Advertisments