BIONICLEsector01:Help/External Images (Advanced)

From BIONICLEsector01


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. The default alt text is "Non-BS01 Image".
<img alt="TEXT">URL</img>
external image
style='border: ;' Adds a border around an image.
<img style='border: #px solid #000000;'>URL</img>
external image
width=" " height=" " Makes images bigger and smaller. Only one of the two is required.
<img width="#px" height="#px">URL</img>
external image
onmouseover="this.src=' '" Changes the image when the mouse goes on top of it.
<img onmouseover="this.src="'URL2'">URL1</img>
external 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 onmouseover="this.src='URL2'" onmouseout="this.src="'URL1'">URL1</img>
external image
onclick="this.src=' '" Changes the image when it is clicked on.
<img onclick="this.src="'URL2'">URL1</img>
external image

*It is not necessary to use width and height, if desired, you can use just width or just height

Further Assistance

Members with the following badges will be able to assist you. To see the list of members, simply click on the image and scroll down to the list at the bottom of the page.