BIONICLEsector01:Help/External Images (Advanced)

Return to BS01 Help

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