Lissa Explains it All:  Web Design Forums  

Go Back   Lissa Explains it All: Web Design Forums > LEIA Archives > Web Site Help > HTML Help

Notices

Reply
 
Thread Tools Display Modes
  #1  
Old 06-18-2006, 06:36 PM
cre8tivecards cre8tivecards is offline
n00bzilla
 
Join Date: Jun 2006
Posts: 4
cre8tivecards is on a distinguished road
html code for click on image to enlarge?

I'm setting up a scrapbook store on line and I want my pages to load quick, so my images are small. I want the image to have a clickable link for a larger view of that image? HELP!!!
Reply With Quote
Sponsored Links
  #2  
Old 08-21-2006, 04:39 AM
ksprinkles ksprinkles is offline
n00bzilla
 
Join Date: Aug 2006
Posts: 1
ksprinkles is on a distinguished road
Click to enlarge images too!

Quote:
Originally Posted by cre8tivecards View Post
I'm setting up a scrapbook store on line and I want my pages to load quick, so my images are small. I want the image to have a clickable link for a larger view of that image? HELP!!!
I also am looking for the HTML code for click to enlarge. Can someone help me? I am new to this and I am from Charleston, SC. Hello everyone!
Reply With Quote
  #3  
Old 08-21-2006, 05:13 AM
EhraniNavy EhraniNavy is offline
n00bzilla
 
Join Date: Aug 2006
Location: Longmont, CO, USA
Posts: 44
EhraniNavy is on a distinguished road
Here's what you need to do:

You can either:

1) Open a new window

or

2) Transfer the page

or

3) Use CSS and Javascript to display a bigger picture on the same page when the user clicks the smaller image.

Option 1)

Open a new window in javascript

HTML Code:
<script type="text/javascript">
function newWin(url,name, width, height) { 
window.open(url,name,'scrollbars=yes,resizable=yes, width=' + width + ',height='+height);
}</script>
Where your picture is, add this:
HTML Code:
<a href="javascript:newWin('img_big.jpg', 'Bigger Image', '300', '300')"><img src="img_small.jpg" width="100" height="100" /></a>
Where img_big.jpg is add your big url (I'm talking to both of you hear so bear with me if you are the more experienced one), 'Bigger Image' is where your title goes (ie "My Vacation") and the width and height are those of the bigger image.

That's that

Option 2) Transfer the page

In this example you will have two pages, one with the image link on it, the other with javascript (or PHP code) that checks for the query string and grabs that and compares it to what it has.

Okay, first, on the first page, we have:

HTML Code:
<a href="showimage.htm?bigger_image.jpg"><img src="smaller_image.jpg" /></a>
on the second page, we'll just have some javascript

HTML Code:
<html>
<body>
<script type="text/javascript">
//This executes on load without calling any functions

var _search = location.search;
//The query string
var theImage = _search.substring(_search.indexOf("?"))
//The image code comes after the ? in the query string

document.writeln("<img src=\"" + theImage + "\" /><br>");
//Write the image tag down to the page
</script>
<!-- Provides a way to get back -->
<A href="javascript:history.go(-1)">Back</a>
</body>
</html>
That's that

Option 3) Use CSS and Javascript to display a bigger picture on the same page when the user clicks the smaller image.

Well you need to put both images on the same page, but add "display: none" to the bigger one. Also give both of them unique names:

HTML Code:
<img src="smaller_image.jpg" id="myuniquename" />
<img src="bigger_image.jpg" id="myuniquename2" style="display:none" />
Now, write them javscript code that closes the other one

HTML Code:
<script type="text/javascript">
//this function opens one and closes the other
function showCloseLevel(idOpen, idClose) {
    //Show idOpen
    document.getElementById(idOpen).style.display = "";
    //Close idClose
    document.getElementById(idClose).style.display = "none";
}
</script>
Now just add the links to the images from above

HTML Code:
<a href="javascript:showCloseLevel('myuniquename2', 'myuniquename')"><img src="smaller_image.jpg" id="myuniquename" /></a>
<a href="javascript:showCloseLevel('myuniquename', 'myuniquename2')"><img src="bigger_image.jpg" id="myuniquename2" style="display:none" /></a>
That's that
Reply With Quote
  #4  
Old 08-21-2006, 03:43 PM
rustysocks rustysocks is offline
n00bzilla
 
Join Date: Dec 2005
Location: UK
Posts: 7
rustysocks is on a distinguished road
ooh i know i saw it the other day hang on

http://www.dynamicdrive.com/dynamicindex4/indexb.html (galleries and viewers)
or
http://www.dynamicdrive.com/dynamicindex14/index.html (slideshows)

both have lots of different codes lol

Last edited by J to the izzosh; 08-21-2006 at 04:42 PM. Reason: Please, refrain from double posting.
Reply With Quote
  #5  
Old 08-21-2006, 10:53 PM
braveryonions braveryonions is offline
n00bzilla
 
Join Date: Aug 2006
Posts: 14
braveryonions is on a distinguished road
some of you guys are just making this too hard. use this code:

<a href="URL of the big image goes here."><img src="Same URL as before" width="put the desired width here (thats how you are making it smaller" height="put the desired height here" alt="Your Image Name"></a>
Reply With Quote
Reply

Thread Tools
Display Modes

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 Off
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Cursor: How can I make my own cursor in html code with an image I already have? khristel_hoch HTML Help 6 01-17-2006 10:43 PM
html image code not working frisky HTML Help 3 12-08-2005 05:37 PM
how can I set a size for my image so it will load this way? (the html code that is..) sugarbyte HTML Help 4 07-10-2004 04:12 AM
How do you SHOW an html code feedyourku HTML Help 3 05-02-2004 09:32 PM
Mouseover Image HTML Code Please Nicola HTML Help 14 02-28-2004 11:39 PM


All times are GMT. The time now is 09:02 AM.


Powered by vBulletin® Version 3.8.3
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.