| View previous topic :: View next topic |
| Author |
Message |
ws
Write and Show support
Joined: 27 May 2007
Posts: 140
|
 Posted: Mon May 28, 2007 12:49 am Post subject: ClickPic button - linked images show remote locations |
|
Button name : Click Pic
Button Feature and action: This is an image with a link which will open a destination picture or webpage in a new window. This button enables the display of an image (photo or graphic) with a link. This can be a link to a larger picture of the image or to some other internet location (webpage). You can use this to create your own thumbnails, which is different than the thumbnail produced by the Thumb button feature (which has a hovering display when the mouse is positioned over it). It is merely a picture you can click on (Click pic) to open a link in a new window.
Example (click this pic to open cnn.com in a new window):
Write and Show's implementation is actually better than this forum software example, because the Write and Show click pic image shows your "customized title" when the mouse is over the image (as you can see by going to our demo at the end of this instruction).
Testing and usage: When you click the Click Pic button this code is inserted into your document:
| Quote: | | <a href="http://replace this text with target url" target="_blank"><img src="http://paste image url here" title="click here to view something else" width="320" height="266"/> </a> |
Steps:
A. Have the url (web address) of the image you wish to display. ready.
B. Also have the url the destination ready. This might be a website or it might just be a large view of your smaller picture. | Quote: | | Note: You will need to have the image which you want to use as the displayed image ready and hosted somewhere (like photobucket). For our example, we went to the cnn site and did a screen capture (see special section on Write and Show for techniques about images) and then reduced the screen capture to the size shown. Then we uploaded it to our remote storage location. |
C. Insert the appropriate links (urls) for the destination and for your image's remote location.
D.Adust the width and the height to the correct dimensions of your picture. Notice the width and height, which we automatically put in... that is done so that it will fit on your book page nicely. If you are going to show a remote website... it's nice to be able to see a bit of what you are going to view. Using a really tiny pic isn't as effective
A note of caution: while you certainly can adjust your height and width to any size even if the remote picture is large, your viewers on a dialup will have a slow time seeing your thumbnail, because the whole picture must load just to see the tiny pic on the screen. So, limit the number of those to a page (or just create small images to use as your "click pics").
E. Change that title to something more appropriate for what you are displaying (that text appears when a reader positions the mouse over the picture).
Example on a Write and Show book page:
http://xgj.com/noevidence/examples.php (go to last page) |
|
| Back to top |
|
 |
ws
Write and Show support
Joined: 27 May 2007
Posts: 140
|
| Posted: Sun Nov 11, 2007 1:46 pm Post subject: How to make sure your ClickPic image is proportionate |
|
How to make a ClickPic image to a larger picture look right
When using ClicPic to show a large image of an picture or graphic you are hosting remotely, you want to be sure that your image in the book looks proportionate. Therefore, you should change the width and length of your book's ClickPic image so that viewers will see it in a proper proportion (this way... it will look just like a miniature of your larger image).
How do you make it have the right proportions?
Well, you know that you want the width to always be no more than 320 pixels (always use at least 320, not smaller... and it could be up to even 340).. So, the 320 (or whatever dimension is your width) becomes your dividend (using the correct elementary school terminology), The actual width of your large image becomes your divisor . The answer (if you remember from the 4th grade) is called the quotient (which in our case will be a decimal fraction).
1.Calculate your fraction
Simply, take the width of the large image... and make that the dividend to obtain a fraction:
320/big pic width = decimal fraction.
2. Calculate your new ClickPic height
Multiply the big pic's pixel height by that fraction (you just calculated)... and voila you have the height to enter for your ClicPic code,
3. Put it into your ClickPic code:
| Quote: | | <a href="http://replace this with target url" target="_blank"><img src="http://paste image url here" title="click here to view something else" width="320" height="190"/> </a> |
3. Display it:
Now it will look proportionate when you display it in your book.
Example:
Dimensions of a typical big picture - width: 754 height: 452
a. Calculate the fraction:
320/754 = 0.42
b. Calculate your new ClickPic height:
.42 x 452 = 190 pixels
So: For the click pic, this would be typical code:
| Quote: | | <a href="http://zqv.com/noevidenceofacrime/files/temparea/nyadwontrunbig.jpg" target="_blank"><img src="http://zqv.com/noevidenceofacrime/files/temparea/nyadwontrunbig.jpg" title="Click to see larger image" width="320" height="190"/> </a> |
It will look proportionate and not distorted (although, maybe it won't be really readable, because it might be very much smaller that the large image you are displaying). |
|
| Back to top |
|
|
|
|
|
Search