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.


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