|
|
Image Wrap Generator
Wrap code works on any website and is not limited to only Myspace users.
Preview
All Examples • Deeper Understanding
Do you really want to know how to wrap text around an image? By following our simple tutorial you will learn and gain core knowledge how to manipulate HTML tags and codes to reach your goal without need to use any kind of Text Wrap around Image Generator. Knowledge is Power!
How to Wrap Text around Picture, Photo • HTML Wrapping Tutorial
The next demo examples will show you effects how to wrap text around pictures, images. Follow this visual tutorial and learn how to apply this technique to your website or blog web page such as Myspace.
| Text Wrapping Around the Images |
| Wrap Examples |
Corresponding HTML Codes |
|
Left Image Wrap
To give a professional look to your web page or blog you can wrap a surrounding text around the image. Tip: To wrap a text around the right side of the picture just type align="left" into the <img> tag for the image.
To customize our wrap codes with your own value just change everything you see in Blue.
|
for any Website, Blog, Profile 1.0, etc.
<div style="height: 100%; text-align: left; margin: 10px 0px;">
<a href="http://www.fillster.com/htmlcodes/wrapimage.html">
<img src="IMAGE ADDRESS HERE" border="0" align="left" hspace="10" vspace="3" alt="Wrap Text around Image" />
</a>
<span>YOUR TEXT HERE</span>
</div>
for Myspace 2.0 Profile only
<div style="height: 100%; text-align: left; margin: 10px 0px;">
<a href="http://www.fillster.com/htmlcodes/wrapimage.html">
<img src="IMAGE ADDRESS HERE" border="0" style="float:left; margin:0px 10px 3px 0px;" alt="Wrap Text around Image" />
</a>
<span>YOUR TEXT HERE</span>
</div>
|
|
Right Image Wrap
Also you can wrap text around the picture by placing your image on the right side in the relationship to your text. Trick: Type align="right" into the picture, photo <img> tag.
To customize any wrapping code just change a Blue value.
|
for any Website, Blog, Profile 1.0, etc.
<div style="height: 100%; text-align: left; margin: 10px 0px;">
<a href="http://www.fillster.com/htmlcodes/wrapimage.html">
<img src="IMAGE ADDRESS HERE" border="0" align="right" hspace="10" vspace="3" alt="Wrap Text around Image" />
</a>
<span>YOUR TEXT HERE</span>
</div>
for Myspace Profile 2.0 only
<div style="height: 100%; text-align: left; margin: 10px 0px;">
<a href="http://www.fillster.com/htmlcodes/wrapimage.html">
<img src="IMAGE ADDRESS HERE" border="0" style="float:right; margin:0px 0px 3px 10px;" alt="Text Wrap around Picture" />
</a>
<span>YOUR TEXT HERE</span>
</div>
|
|
Left & Right Image Wraps
Wrapping text between two images is similar to both examples given above. What you have to do is to add a second image tag where you indicate an opposite align value to the first image.
To customize the wrapping codes with your own pictures and text just change what you see in Blue.
|
for any Website, Blog, Profile 1.0, etc.
<div style="height: 100%; text-align: left; margin: 10px 0px;">
<a href="http://www.fillster.com/htmlcodes/wrapimage.html">
<img src="LEFT IMAGE ADDRESS HERE" border="0" align="left" hspace="10" vspace="3" alt="Text Wraps around Image" />
</a>
<a href="http://www.fillster.com/htmlcodes/wrapimage.html">
<img src="RIGHT IMAGE ADDRESS HERE" border="0" align="right" hspace="10" vspace="3" alt="Wrapping Text around Image" />
</a>
<span>YOUR TEXT HERE</span>
</div>
for 2.0 Myspace Profile only
<div style="height: 100%; text-align: left; margin: 10px 0px;">
<a href="http://www.fillster.com/htmlcodes/wrapimage.html">
<img src="LEFT IMAGE ADDRESS HERE" border="0" style="float:left; margin:0px 10px 3px 0px;" alt="Wrap Text around Image" />
</a>
<a href="http://www.fillster.com/htmlcodes/wrapimage.html">
<img src="RIGHT IMAGE ADDRESS HERE" border="0" style="float:right; margin:0px 0px 3px 10px;" alt="Text Wrap around Picture" />
</a>
<span>YOUR TEXT HERE</span>
</div>
|
|
Stop Text Wrap
Sometimes at some point we want to stop*
wrap function. If so, at that point* we have to place <br clear="left" /> break tag to stop that wrap function around the image.
To customize our text-image-wrap codes with your images and text just change everything you see in Blue.
|
for any Website, Blog, Profile 1.0, etc.
<div style="height: 100%; text-align: left; margin: 10px 0px;">
<a href="http://www.fillster.com/htmlcodes/wrapimage.html">
<img src="IMAGE ADDRESS HERE" border="0" align="left" hspace="10" vspace="3" alt="Wrap Text around Image" />
</a>
<span>YOUR TEXT HERE*
<br clear="left" />
CONTINUE YOUR TEXT HERE WITHOUT IMAGE WRAPPPING</span>
</div>
for Myspace 2.0 only
<div style="height: 100%; text-align: left; margin: 10px 0px;">
<a href="http://www.fillster.com/htmlcodes/wrapimage.html">
<img src="IMAGE ADDRESS HERE" border="0" style="float:left; margin:0px 10px 3px 0px;" alt="Wrap Text around Image" />
</a>
<span>YOUR TEXT HERE*
<br style="clear: left;" />
CONTINUE YOUR TEXT HERE WITHOUT IMAGE WRAPPPING</span>
</div>
|
| Definitions & Tips |
- <div> - HTML tag which defines a division, section of the document.
- align="left" - sets the image to align left in relation to the surrounding text.
- hspace="10" - sets the horizontal distance of 10 pixels between the image and the text.
- vspace="3" - sets the vertical distance of 3 pixels between the image and the text.
- <span> - HTML tag that contains a paragraph.
- <br clear="left"> - Stop point of text wrapping around the image (clear="left" - in this example).
*To customize the wrap codes with your own elements just change everything you see in Blue
|
| For CSS users (only) • Example how to convert Inline Style codes to External Style (.css) |
|
Inline Style (HTML page)
<div><img src="/images/tutorial.gif" align="left" hspace="10" vspace="3" /><span>Change this text</span></div>
|
External Style (HTML page)
<div>
<span class="image-wrapping">
<img src="/images/tutorial.gif" />
</span>
<span>Change this text</span>
</div>
|
|
External Style (.CSS file)
.image-wrapping {
float: left;
margin: 3px 10px;
border: 0px;
}
|
Pay Attention! align="left" and hspace="10" vspace="3 in the Inline Style HTML page will become float: left; and margin: 3px 10px; in the supporting .css file for the External Style HTML page correspondently.
|
To grant access to this page, for the visitors of your site, just copy the code below and paste it into your Myspace blog or website.
|
|
|
|
