changing image without javascript

M

mistral

Is there way change image (swap) on click on thumbnail without
javascript? I.e. main image is big(preview), and below it is two small
images - when click on small image, it should change big image. All on
one page, without opening new windows.
 
E

Erwin Moller

mistral said:
Is there way change image (swap) on click on thumbnail without
javascript? I.e. main image is big(preview), and below it is two small
images - when click on small image, it should change big image. All on
one page, without opening new windows.
Click to expand...

That is only possible via a pagerefresh.
Make the thumbnail a hyperlink to some page on your server that return
the new page, including the bigger picture or whatever more you want on
that page.

Without javascript you are stuck with static pages with HTML and CSS.

Regards,
Erwin Moller
 
E

Evertjan.

Erwin Moller wrote on 03 mrt 2008 in comp.lang.javascript:
That is only possible via a pagerefresh.
Make the thumbnail a hyperlink to some page on your server that return
the new page, including the bigger picture or whatever more you want on
that page.

Without javascript you are stuck with static pages with HTML and CSS.
Click to expand...

Or use vbscript and be stuck with IE. ;-(
 
M

mistral

That is only possible via a pagerefresh.
Make the thumbnail a hyperlink to some page on your server that return
the new page, including the bigger picture or whatever more you want on
that page.

Without javascript you are stuck with static pages with HTML and CSS.

Regards,
Erwin Moller
Click to expand...
------------

I mean something like image preview on ebay , without refreshing page:

http://cgi.ebay.com/ws/eBayISAPI.dl...&pfid=0&fsop=1%26fsoo%3D1&fcl=3&frpp=50&fvi=1

is there simplified version?
 
M

mistral

[email protected] said:
------------

I mean something like image preview on ebay , without refreshing page:

is there simplified version? -------------

No. The best you can do is changing the image via "active" or "hover"
selectors (whatever those are called) on CSS elements like an "anchor
(a)".-
Click to expand...

----------------------

Could you please be so kind to show me working example of that
approach? Also, there is only description section (inside body)
available for user html - no access to head section.

Thanks.
 
S

SAM

mistral a écrit :
is there simplified version?
Click to expand...

<div style="position:relative;text-align:right" id="gallery">
<a href="#"><img src="small1.jpg"><span><img src="big1.jpg"></span></a>
<br>
<a href="#"><img src="small2.jpg"><span><img src="big2.jpg"></span></a>
<br>
<a href="#"><img src="small3.jpg"><span><img src="big3.jpg"></span></a>
</div>

CSS :
#gallery a span { position: absolute;
top: 10px;left:10px; display: none; }
#gallery a:hover span { display: block; }
#gallery img { border: 0 }
 
S

SAM

mistral a écrit :
Could you please be so kind to show me working example of that
approach? Also, there is only description section (inside body)
available for user html - no access to head section.
Click to expand...

<html>
<title>images over</title>
<body>
<style type="text/css">
#gallery a span { display: block; position: absolute;
top: 10px; right:10px; visibility: hidden; }
#gallery a:hover span { visibility: visible; border: 1px solid black; }
#gallery img { border: 0; margin: 5px; }
..small{ width: 150px }
</style>
<div style="position:relative;" id="gallery">
<a href="#"><img src="small1.jpg" class="small" alt=""><span><img
src="big1.jpg" alt=""></span></a>
<br>
<a href="#"><img src="small2.jpg" class="small" alt=""><span><img
src="big2.jpg" alt=""></span></a>
<br>
<a href="#"><img src="small3.jpg" class="small" alt=""><span><img
src="big3.jpg" alt=""></span></a>
</div>
</body>
</html>
 
M

mistral

mistral a ¨¦crit :




<html>
<title>images over</title>
<body>
<style type="text/css">
#gallery a span { display: block; position: absolute;
top: 10px; right:10px; visibility: hidden; }
#gallery a:hover span { visibility: visible; border: 1px solid black; }
#gallery img { border: 0; margin: 5px; }
.small{ width: 150px }
</style>
<div style="position:relative;" id="gallery">
<a href="#"><img src="small1.jpg" class="small" alt=""><span><img
src="big1.jpg" alt=""></span></a>
<br>
<a href="#"><img src="small2.jpg" class="small" alt=""><span><img
src="big2.jpg" alt=""></span></a>
<br>
<a href="#"><img src="small3.jpg" class="small" alt=""><span><img
src="big3.jpg" alt=""></span></a>
</div>
</body>
</html>
Click to expand...
------
well, I tried but this not work for me. I think, we really need use
onclick function to keep things simple and reliable. I want something
like aboved ebay example where is one big image and two small that
update this big one. And there no need for javascript tags, just
onclick="update('http://www.site.com/image1.jpg', 0, false); return
false;" etc
How to implement this?(inside table)

thanks
 
S

SAM

mistral a écrit :
well, I tried but this not work for me. I
Click to expand...

that could but not with IE
(and certainly only Firefox)
(and probably not in tables)

#gallery a:hover span,
#gallery a:focus span { visibility: visible; border: 1px solid black; }
think, we really need use
onclick function to keep things simple and reliable. I want something
like aboved ebay example where is one big image and two small that
update this big one. And there no need for javascript tags,
Click to expand...

there is certainly somewhere a JS tag to declare the function :
update(image, type, yes-no)

just onclick="update('http://www.site.com/image1.jpg', 0, false);
return false;" etc
How to implement this?(inside table)
Click to expand...

Why inside table ?
Are they tabulate datas ?

demos :
<http://cjoint.com/data/deb36sjiHq_image_table_.htm>
<http://cjoint.com/data/deb5T24ZpX_image_table_.htm>

and without JS tag :
<http://cjoint.com/data/dechLk6arZ_image_table_wout-js.htm>
 
M

mistral

03:08 said:
mistral a écrit :


that could but not with IE
(and certainly only Firefox)
(and probably not in tables)

#gallery a:hover span,
#gallery a:focus span { visibility: visible; border: 1px solid black; }


there is certainly somewhere a JS tag to declare the function :
update(image, type, yes-no)


Why inside table ?
Are they tabulate datas ?

demos :
<http://cjoint.com/data/deb36sjiHq_image_table_.htm>
<http://cjoint.com/data/deb5T24ZpX_image_table_.htm>

and without JS tag :
<http://cjoint.com/data/dechLk6arZ_image_table_wout-js.htm>
Click to expand...
=================

This look really nice and simple. Sure, images are not tabular data,
table just allow easy arrange images positions by changing row order.
Some note: how to change(increase) horizontal spacing between big
image and two small pics? If use <base href="http://.../"> parameter,
it should go right after <html> tag, or can be added before table as
well?

<html>
<title>images click</title>
<body>
<table>
<tr>
<td rowspan=2>
<img name="viewer" src="http://stephane.moriaux.pagesperso-
orange.fr/truc/asm1.gif" alt="" width="300">
</td>
<td>
<a href="http://stephane.moriaux.pagesperso-orange.fr/truc/
asm1.gif"
onclick="document.images['viewer'].src=this.href;return
false;">
<img src="http://stephane.moriaux.pagesperso-orange.fr/truc/
asm1.gif" alt="" width="140">
</a>
</td>
</tr>

<tr>
<td>
<a href="http://stephane.moriaux.pagesperso-orange.fr/truc/
asm3.gif"
onclick="document.images['viewer'].src=this.href;return
false;">
<img src="http://stephane.moriaux.pagesperso-orange.fr/truc/
asm3.gif" alt="" width="140">
</a>
</td>

</tr>
</table>
</body>
</html>

Thank you.
M.
 
S

SAM

mistral a écrit :
This look really nice and simple. Sure, images are not tabular data,
table just allow easy arrange images positions by changing row order.
Some note: how to change(increase) horizontal spacing between big
image and two small pics?
Click to expand...

Here it is a NG about JS, not about HTML or CSS ... :-(

<td rowspan=2>
<img name="viewer" src="#" alt="area for big view" width="300"
style="margin-right: 50px">
If use <base href="http://.../"> parameter,
it should go right after <html> tag, or can be added before table as
well?
Click to expand...

for a correct working the tag 'base' have to be placed in 1rst position,
before or after the title in head.

I used it for convenience because on cJoint you put only a fille (not a
complete folder with images).
 
M

mistral

mistral a ¨¦crit :



Here it is a NG about JS, not about HTML or CSS ... :-(

<td rowspan=2>
<img name="viewer" src="#" alt="area for big view" width="300"
style="margin-right: 50px">


for a correct working the tag 'base' have to be placed in 1rst position,
before or after the title in head.

I used it for convenience because on cJoint you put only a fille (not a
complete folder with images).
Click to expand...
---------
You've omitted image height attributes just to simplfy examples,
however, we can set it as required?

thanks,
M.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Image issues 0
Pink effect hovering image 1
Image upload not working in browser 4
How Do I Set text on an Image and use the image as a border? 7
Code For New Image Every Time The Page Refreshes? 0
Pyautogui, cv2 and cannot find image 0
Image overlay and comparison code error. 2
Put image over the top of another image on hover 3

Members online

Total: 26 (members: 4, guests: 22)
Robots: 217

Forum statistics

Threads
473,755
Messages
2,569,538
Members
45,024
Latest member
ARDU_PROgrammER

Latest Threads

Top