making pictures larger on click in newsletter

Posted on 2012-08-17
Last Modified: 2012-09-14
hi Folks,

I'm doing this newsletter for my group. There are three pages of a report that was in PDF format, I used a snip it tool and got the essentials. I'd like to have these in the newsletter and have it so readers can "click to enlarge" the image. I've found snippets of code, but where can I put this code? the newsletter is currently just a word template.

Question by:dlewis61
    LVL 6

    Assisted Solution

    What format will your finished newsletter be and how are you delivering it to your group? Enlarging thumbnails on a website is one thing, but email programs may not allow your code to run for security reasons.

    Author Comment

    Well, probably email. I just started this job so not sure of their delivery methods but I'm guessing email. Do you have ideas for either? What if I used MS Publisher?
    LVL 6

    Expert Comment

    What you've described is a thumbnail pic that when clicked, pops open a larger image in a new window. That requires scripting and most email programs will disable it when the message arrives because the scripting is also used to deliver viruses.

    With HTML, pictures are not embedded in the page. HTML points to a file located somewhere on a hard drive. In an HTML email message, pictures are delivered with the message, stored at the size displayed to minimize the size of the message file. You could send larger pictures as attachments, but that would be burdensome on recipients and server systems.

    Consider for a moment what happens when an HTML message arrives in your inbox. If you click on something in the message, it takes you to a webpage where you can see additional detail. And that might be the way you need to go.

    As far as Publisher goes, NOT. If you are using Office 2010, Outlook has the tools you need to create a message with pictures, etc. in HTML format and you can save a basic page layout as "stationery" or as a template (.OFT file).

    If you're going to take on building a webpage also, there are lots of free HTML editors out there. I like Microsoft's WebMatrix. It's free. There are lots of tutorials and forum support to help you.

    I know that what you want to do sounds really simple. But anytime you want a page to do more than just sit there, when you want it to do something "cool," it's seldom as easy as it looks to the reader.
    LVL 49

    Accepted Solution

    Although the top comment is mostly true, there is no need for scripting to allow a 'click for full image'. Basically it's a link to a larger asset.

    In your newsletter use a small image, surrounded with a hyperlink to the larger image:

    <a href="http://mywebsite/images/myimage1-large.jpg"><img src="myimage1-small.jpg" /></a>

    Then make sure that the large image is available on your website, and the smaller image is either embedded in your newsletter, or also hosted on your website, in which case you need to use the full url to the image in your newsletter's <img> tag as well.


    LVL 6

    Expert Comment

    @roonan: while you are right about simply opening a new webpage to display the larger image, I assumed dlewis wanted a pop-up enlargement that would be javascripted.

    Again though, if it's a link, it's not embedded in the email, but stored on an accessible server. :(
    LVL 6

    Expert Comment

    Hi dlewis! It's been a few weeks since you posted this question and Roonaan and I commented. I know we didn't have an easy solution for you and probably posed more questions than answers. I am curious to find out if you resolved the issue or if you found out more about the format in which this newsletter will be published.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Introduction This tutorial provides instructions on how to properly format your Word document using the inbuilt tools provided. The benefits of using these tools means your documents are more accessible and easily portable to other applications an…
    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
    Learn how to create and modify your own paragraph styles in Microsoft Word. This can be helpful when wanting to make consistently referenced styles throughout a document or template.

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now