Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

picture enlarge

Status
Not open for further replies.
samesale

samesale

Programmer
Sep 15, 2003
133
US
I have written the following HTML. I would like to show the smaller picture. But allow a person to enlarge the picture by clicking the word enlarge. However, it does not work.

<html>
<head><title>test image</title></head>
<body>
<img src=&quot;car.jpg&quot; width=&quot;130&quot; height=&quot;90&quot; align=&quot;left&quot; vspace=&quot;0&quot; hspace=&quot;0&quot;>
<a href=&quot; image src=&quot;car.jpg&quot; width=&quot;200&quot; height=&quot;250&quot; alt=&quot;car.jpg&quot; >enlarge </a>
</body>
</html>


 
Sort by date Sort by votes
Hope this is what you're looking for. Notice the target blank if you don't want a separate page for the pic remove this attribute.
Code: 
<html>
<head><title>test image</title></head>
<body>
<img src=&quot;car.jpg&quot; width=&quot;130&quot; height=&quot;90&quot; align=&quot;left&quot; vspace=&quot;0&quot; hspace=&quot;0&quot;>
<A HREF=&quot;car.jpg&quot; width=&quot;200&quot; height=&quot;250&quot; TARGET=&quot;blank&quot;>enlarge</A>
</body>
</html>

Glen
 
Upvote 0 Downvote

Specifying a WIDTH and HEIGHT for the A tag will not make the target image appear any bigger.

You can omit those, and it will appear at its natural size.

If you want it to appear as a bigger version, you have the following 3 options:

1. Have a bigger version of the image as the target,
2. Have a smaller version of the image as the thumbnail,
3. Have the same image for both, but specify a smaller width and height for the thumbnail version (i.e. the WIDTH and HEIGHT parameters for the IMG tag).

Hope this helps!

Dan
 
Upvote 0 Downvote
Thanks for your suggestions. May be I did not explain the problem clearly. I want the larger picture to appear when someone clicks enlarge. However, I did try Dan's suggestion. That is,

<img src=&quot;car.jpg&quot; width=&quot;130&quot; height=&quot;90&quot; vspace=&quot;0&quot; hspace=&quot;0&quot;>
<img src=&quot;car.jpg&quot; width=&quot;30&quot; height=&quot;40&quot; ALT=&quot;car.jpg&quot;>enlarge </a>

Obviously, it shows both pictures. I do no want that. I am sure there is a way, or may be I do not understand you suggestion. Anyway, thanks.
 
Upvote 0 Downvote
Here's a generic solution for you. It does more than you're asking, but it does so in a nifty way.

Copy this to a file called sample.html and then copy into that same directory this image: [soapbox], which you should save as soapbox.gif.

Code: 
<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <title>JavaScript Sample</title>
  </head>
  <body>
    <form name=&quot;MainForm&quot;>
      <table border=&quot;1&quot;>
        <tr>
          <td><input type=&quot;button&quot; value=&quot;taller&quot; onclick=&quot;document.Grafix01.height += 3;&quot;></input></td>
          <td colspan=&quot;2&quot; rowspan=&quot;2&quot;><img src=&quot;soapbox.gif&quot; height=&quot;58&quot; width=&quot;43&quot; alt=&quot;Soap Box&quot; name=&quot;Grafix01&quot; id=&quot;Grafix01&quot;></img></td>
        </tr>
        <tr>
          <td><input type=&quot;button&quot; value=&quot;shorter&quot; onclick=&quot;document.Grafix01.height -= 3;&quot;></input></td>
        </tr>
        <tr>
          <td><input type=&quot;button&quot; value=&quot;Normalize&quot; onclick=&quot;document.Grafix01.height = 58;document.Grafix01.width = 43;&quot;></input></td>
          <td><input type=&quot;button&quot; value=&quot;Skinnier&quot; onclick=&quot;document.Grafix01.width -= 3;&quot;></input></td>
          <td><input type=&quot;button&quot; value=&quot;Wider&quot; onclick=&quot;document.Grafix01.width += 3;&quot;></input></td>
        </tr>
        <tr>
          <td colspan=&quot;3&quot;><p>Height (pixels): <input type=&quot;text&quot; size=&quot;3&quot; name=&quot;Higgins&quot; id=&quot;Higgins&quot; onblur=&quot;document.Grafix01.height=document.MainForm.Higgins.value;&quot;></input><br />Width (pixels): <input type=&quot;text&quot; size=&quot;3&quot; name=&quot;Widdershins&quot; id=&quot;Widdershins&quot; onblur=&quot;document.Grafix01.width=document.MainForm.Widdershins.value;&quot;></input></p></td>
        </tr>
      </table>
      <p>Resize the image dynamically using the buttons</p>
    </form>
  </body>
</html>

Hope that helps!

Cheers,


[monkey] Edward [monkey]

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door
 
Upvote 0 Downvote
If i Understand what you want this should do the trick
go here and type your tek-tips member name in an click login...



I'm not sure if you wanted the pop-up window...if you didn't welp I guess the script isn't what you wanted...but you should check it out any ways.
Jammer1221
 
Upvote 0 Downvote
Thank you very much jammer1221 for excellent program. I tried it and it works exactly as I wanted. I appreciate the help of all who tried to help. I really appreciate the help of Jammer1221. Thanks again.
 
Upvote 0 Downvote
Jammer,

You've chosen an interesting way to show each user 'their' content, but you seem to have missed one thing...

Using bookamrks, as you do, to locate the content for each user... They can only get to the first bookmark with their ID. You, for example, have more than one ID, so using your method, you'd only ever be able to see the first 'solution' if you typed in &quot;jammer1221&quot;, not all solutions. You need to consolidate the solutions for each user under one bookmark.

Hope this helps!

Dan
 
Upvote 0 Downvote
Dan
Thats a good point, I've never thought of that...I first made that page for a multi-page solution for someones thread and i Just kept using it becuase it seemed ok, but I'm glad you pointed out that problem before I helped someone that I helped before an looked kinda dumb.

glenmac & wartookman
You can only use that page if theres a previous solution that you had solved there...I made that page when I first learned PHP an what happened is it takes the name an creates a link that links to a target inside the document...and so if you put in a name that doesn't have a target inside the document then PHP will create a link that links to nothing.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Megabyte512
  • Locked
  • Question
Canvas Profile Picture Edit
Replies
1
Views
107
ChrisHirst
ChrisHirst
cmayo
  • Locked
  • Question
CSS - Elastic div, text and picture alignment
Replies
18
Views
283
1DMF
1DMF
Andale
  • Locked
  • Question
PhotoGallery enlarge
Replies
3
Views
34
Andale
Andale
LKB6
  • Locked
  • Question
window.open from a picture
Replies
4
Views
55
LKB6
LKB6
hosted3334
  • Locked
  • Question
Place a picture
Replies
8
Views
74
hosted3334
hosted3334

Part and Inventory Search

Sponsor

Back
Top