Use Code to Make a Click to Enlarge Image on a Website
Blogspot's days of ease seem to be in the past with issues of space between elements out of control and virtually unfixable. An easier method to paste HTML coding is to use an online HTML Generator. We use Online HTML Editor.
How to Post an Image and Text
1. To get started we need to find the image address. To do this publish a page with the image on it. Then right click and copy the image address.
2. Now go to /html-online.com/editor/
3. Select File > New. Then Insert > Image.
2. Now go to /html-online.com/editor/
3. Select File > New. Then Insert > Image.
4. Past the Image Address (scr) in the Source Box and give it an ALT name in the Image Description box. Leave the Dimensions box empty. Click Ok and the image will appear in the Editor and Coding will appear in the second area next to it.
For an image that will click to enlarge proceed to step 5. If not the code is ready to paste into the website as in Step 9.
For an image that will click to enlarge proceed to step 5. If not the code is ready to paste into the website as in Step 9.
Make A Click to Enlarge Image
5. Click on the Image and then Insert Link (href).
6. A pop-up will appear. Paste the same image link into the URL Box ( the image address may need to be recopied).
7. The coding is almost complete. There is one last thing to do. This is intricate and a little complex. You may like to copy the completed code into Notepad before making changes to it.
|
8. Copy the code below.
image anchor="1" style="margin-left: auto; margin-right: auto;"
Past it after the circled area which says ..178" HERE ><img... in the top image (Step 8 below).
Make sure the inverted commas (") and semicolon's (;) are exact. If something is not correct the color will not look like the images below.
Make sure the inverted commas (") and semicolon's (;) are exact. If something is not correct the color will not look like the images below.
9. Copy the entire code (the bottom image) and paste it into the html of your webpage and hit publish. The image will now enlarge on click. (This also works in reverse if you do not want an image to enlarge on click. For that to happen simply remove the href address all together and leave the scr address.