ADDING IMAGES TO YOUR
Using the HTML <img> element, you can add images and charts to
your posts.
An HTML <img> element has the
following syntax (for the sake of simplicity):
<img src="URL">
Simply replace URL with a link to an image file, then copy and paste (or type) the markup code into your post.
Note that no closing tag is needed for the HTML <img> element.
Here is an example that uses the P&P Logo as the image source.
<img src="URL">
Simply replace URL with a link to an image file, then copy and paste (or type) the markup code into your post.
Note that no closing tag is needed for the HTML <img> element.
Here is an example that uses the P&P Logo as the image source.
MMARKUP CODE
<img src="http://www.finviz.com/image.ashx?dow&rev=635787454349904488";>
RESULTS
http://www.peopleandpicks.com/images/logo2.gif">
HYPERLINKING YOUR IMAGES
Use the HTML <a></a>
element to hyperlink the image to a webpage of your choice, when clicked.
Notice that this element needs a closing tag.
Construct the hyperlink starting with
the opening HTML <a> tag. Next add an empty href=""
attribute to the opening tag. Lastly, apply the corresponding closing
tag.
MARKUP CODE
<a href=""></a>
Now, insert the URL into the empty
href="" attribute within the opening <a> tag (don't put it in
the closing tag). We will use the People and Picks Homepage for this example.
Slap the closing tag onto the end, to complete the <a> element.
MARKUP CODE
Finally, insert your People and Picks
Logo <img> element (created in the first example above) into the
hyperlink element. Using the example from above...
MARKUP CODE
<a href="http://www.finviz.com/image.ashx?dow&rev=635787454349904488";>
<img src="http://www.finviz.com/image.ashx?dow&rev=635787454349904488";>
</a>
<img src="http://www.finviz.com/image.ashx?dow&rev=635787454349904488";>
</a>
RESULTS
http://www.finviz.com/image.ashx?dow&rev=635787454349904488>
NOTE: Test the hyperlink by clicking the People and
Picks Logo image above, which will take you to the People and Picks
Homepage. Use your browser's back button to return to this page.
FORCING THE LINK TO OPEN IN A NEW
WINDOW
You can optionally force the link to
open within a new browser window, so the user does not have to click the back
button to return to the current page.
To do this, add the
target="_blank" attribute to the opening tag of the HTML <a>
element. Here is an example...
MARKUP CODE
<a href="http://www.peopleandpicks.com/";
target="_blank">
<img src="http://www.peopleandpicks.com/images/logo2.gif";>
</a>
<img src="http://www.peopleandpicks.com/images/logo2.gif";>
</a>
RESULTS
http://www.finviz.com/image.ashx?dow&rev=635787454349904488>
NOTE: Test this feature by clicking the People and
Picks Logo image above. The People and Picks Homepage will open in a new
browser window.
ADDING BALLOON HELP TO YOUR IMAGES
You can add "Balloon Help"
(aka ToolTips) to your images to provide more information, or instructions to
the user. Balloon help is provided when the user places their mouse cursor over
the image for a few seconds.
Simply specify the alt attribute within
the HTML <img> element.
The syntax is
<img src="URL" alt="YOUR MESSAGE">
Replace URL with a link to an image file and add the optional target attribute if desired.
Next, replace YOUR MESSAGE with the text that you want to display.
Finally, copy and paste (or type) the markup code into your post.
Expanding on our previous example...
The syntax is
<img src="URL" alt="YOUR MESSAGE">
Replace URL with a link to an image file and add the optional target attribute if desired.
Next, replace YOUR MESSAGE with the text that you want to display.
Finally, copy and paste (or type) the markup code into your post.
Expanding on our previous example...
MARKUP CODE
<a href="http://www.finviz.com";
target="_blank">
<img src="http://www.finviz.com/image.ashx?dow&rev=635787454349904488";>
alt="This is the People and Picks Logo - click it
to open the People and Picks Homepage within a new browser window.">
</a>
<img src="http://www.finviz.com/image.ashx?dow&rev=635787454349904488";>
alt="This is the People and Picks Logo - click it
to open the People and Picks Homepage within a new browser window.">
</a>
RESULTS
http://www.finviz.com/image.ashx?dow&rev=635787454349904488>
To test this, place your mouse cursor over the
image above and wait for a couple of seconds, without moving the mouse. Look
for the balloon help message that we entered above. It should appear at
the tip of the mouse pointer. You may not see the message if your browser does
not support this feature (most modern browsers are OK).
Make sure that you don't mistype or forget any of the important html markup components such as brackets, quotes or slashes! This is one of the most common causes of page display malfunction, along with missing or mismatched starting / closing tags.
Make sure that you don't mistype or forget any of the important html markup components such as brackets, quotes or slashes! This is one of the most common causes of page display malfunction, along with missing or mismatched starting / closing tags.
ADDING CHARTS TO YOUR POSTS
First, a bit of background to help you
to understand how this works.
Most charts are simply images that are dynamically created when you access the webpage that contains it. The chart is typically constructed by the server, converted to an image, then sent to your browser along with the rest of the webpage's content -on-the-fly (typically happens in less than a second).
In almost all cases, the image that is sent uses the same file-name specific to the security it is represents. In other words,http://www.examplestocksite.com/charts/xomdaily.jpg will always 'pull' the current chart for XOM using that same file-name, whether you access it today, tomorrow or the next day (but only on our fictional examplestocksite.com).
There are many sites that follow this practice. The ones that don't, typically embed a date code, serialized key or other unique string into the URL. The only time I would want to use a date in the chart path or file-name is if I want to provide a chart 'snapshot' for a certain date. Even so, I would rather use the Wikinvest embeddable charts which allow you to specify specific dates or ranges.
Note that website developers sometimes change their chart naming convention or site structure from time to time (which can be expensive). This isn't a big deal for an analysis of a stock pick which will become stale after a limited amount of time.
Some sites will only allow you send the chart via email or post it to a social networking site, while others may require you to embed some special code into your post. This may be due to extensive use of scripting, which is not always possible to embed into a blog-post or comment.
Some background on FinViz-
FinViz charts are my favorite. You can sign up for free, or get the FinViz Elite subscription (which allows you to see the same charts in real-time, among other things. I highly recommend the FinViz Elite subscription (but that's a subject for a future post) if you can afford the $40/month.
The paid service uses the 'elite' sub domain, but the rest of the base URL is the same. This allows me to post the free chart, but will allow my browser to automatically redirect me to the FinViz Elite sub domain for access to the real-time version of the chart.
Most charts are simply images that are dynamically created when you access the webpage that contains it. The chart is typically constructed by the server, converted to an image, then sent to your browser along with the rest of the webpage's content -on-the-fly (typically happens in less than a second).
In almost all cases, the image that is sent uses the same file-name specific to the security it is represents. In other words,http://www.examplestocksite.com/charts/xomdaily.jpg will always 'pull' the current chart for XOM using that same file-name, whether you access it today, tomorrow or the next day (but only on our fictional examplestocksite.com).
There are many sites that follow this practice. The ones that don't, typically embed a date code, serialized key or other unique string into the URL. The only time I would want to use a date in the chart path or file-name is if I want to provide a chart 'snapshot' for a certain date. Even so, I would rather use the Wikinvest embeddable charts which allow you to specify specific dates or ranges.
Note that website developers sometimes change their chart naming convention or site structure from time to time (which can be expensive). This isn't a big deal for an analysis of a stock pick which will become stale after a limited amount of time.
Some sites will only allow you send the chart via email or post it to a social networking site, while others may require you to embed some special code into your post. This may be due to extensive use of scripting, which is not always possible to embed into a blog-post or comment.
Some background on FinViz-
FinViz charts are my favorite. You can sign up for free, or get the FinViz Elite subscription (which allows you to see the same charts in real-time, among other things. I highly recommend the FinViz Elite subscription (but that's a subject for a future post) if you can afford the $40/month.
The paid service uses the 'elite' sub domain, but the rest of the base URL is the same. This allows me to post the free chart, but will allow my browser to automatically redirect me to the FinViz Elite sub domain for access to the real-time version of the chart.
To add most charts (including a FinViz
chart), all you have to do is specify the full path to the chart, within the
HTML <img> element (as in the examples above). The following process
should work with most browsers and operating systems.
Open the webpage that contains the chart you want to post.
Right-click on the chart itself, then choose properties.
Look for the 'address' or 'URL' of the image. For the XOM chart on FinViz, this would be
Open the webpage that contains the chart you want to post.
Right-click on the chart itself, then choose properties.
Look for the 'address' or 'URL' of the image. For the XOM chart on FinViz, this would be
http://finviz.com/chart.ashx?t=XOM&;ta=1&p=d&s=l
Copy the URL into your 'clipboard', then paste it into your image tag. If you don't know how to do this, just type it into the tag manually.
Finally, copy and paste the entire image tag, along with the rest of your post into the blog, comment or analysis fields in People and Picks.
Here is an example of the steps we just discussed
Copy the URL into your 'clipboard', then paste it into your image tag. If you don't know how to do this, just type it into the tag manually.
Finally, copy and paste the entire image tag, along with the rest of your post into the blog, comment or analysis fields in People and Picks.
Here is an example of the steps we just discussed
MARKUP CODE
<img src="http://finviz.com/chart.ashx?t=XOM&;ta=1&p=d&s=l">
RESULTS
http://finviz.com/chart.ashx?t=XOM&;ta=1&p=d&s=l">
Below is a better version with a
hyperlink to the associated FinViz page for XOM including balloon help
instructions
MARKUP CODE
<a href="http://finviz.com/quote.ashx?t=xom";
target="_blank">
<img src="http://finviz.com/chart.ashx?t=XOM&;ta=1&p=d&s=l"
alt="This is the FinViz chart for XOM (Exxon Mobil Corp) -
click the image to view the latest quote and news from FinViz">
</a>
<img src="http://finviz.com/chart.ashx?t=XOM&;ta=1&p=d&s=l"
alt="This is the FinViz chart for XOM (Exxon Mobil Corp) -
click the image to view the latest quote and news from FinViz">
</a>
RESULTS
http://finviz.com/chart.ashx?t=XOM&;ta=1&p=d&s=l>
If you have a FinViz Elite account, the site should
automatically redirect you to the real-time version. The URL's are the same
except for the inclusion of the elite sub domain
(http://elite.finviz.com/chart.ashx?t=XOM&ta=1&p=d&s=l).
