BIONICLEsector01:Help/External Images (Advanced)

From BIONICLEsector01, working on 1,551 articles.

Jump to: navigation, search
External Images

Advanced Functions of the <img> Tag

The <img> tag can be 'hacked' using HTML attributes. Since things inside the <img> tag are placed inside the HTML tag like this: <img src="STUFF">, placing a " after the URL ends the src attribute and you can then add attributes after it.

'Hacks'

Attribute Description Coding Example
alt Used to describe images. Default is "Non-BS01 Image".
<img>URL" alt="TEXT"</img>
Example Image
style='border: ;' Adds a border around an image.
<img>URL" style='border: #px solid #000000;'</img>
Non-BS01 Image
style='min-width: ; min-height: ;' Used make images bigger.
<img>URL" style='min-width: #px; min-height: #px;'</img>
Non-BS01 Image
style='max-width: ; max-height: ;' Used make images smaller.
<img>URL" style='max-width: #px; max-height: #px;'</img>
Non-BS01 Image
onmouseover="this.src=' '" Changes the image when the mouse goes on top of it.
<img>URL1" onmouseover="this.src='URL2'"</img>
Non-BS01 Image
onmouseover="this.src=' '" '" onmouseout="this.src=' '" Changes the image when the mouse goes on top of it, then changes it back when the mouse isn't on top of it.
<img>URL1" onmouseover="this.src='URL2'" onmouseout="this.src='URL1'"</img>
Non-BS01 Image
onclick="this.src=' '" Changes the image when it is clicked on.
<img>URL1" onclick="this.src='URL2'"</img>
Non-BS01 Image
Personal tools