Google Translate Widget
If you use the Google Translate widget on your webpages, sometimes there may be some content that you don’t want to translate. You can add class=”notranslate” to any HTML element to prevent that element from being translated. If you have an entire page that should not be translated, you can add:
<meta name=”google” value=”notranslate” />
I wanted to insert an iframe in a webpage, chosen at random among the files panel_1.html, panel_2.html, panel_3.html.
I first tried to setup the iframe with JavaScript at onload with innerHTML or with document.write in a div container called “content”. An example is shown herafter:
var i = 1 + Math.round(Math.random()*(2));
document.getElementById(‘content’).innerHTML='<iframe src=”panel_’ +i +’.html” width=”100%” height=”100%”></iframe>’;
These solutions worked as expected in the Google Chrome browser, but there were problems either with the Firefox browser or with the IE browser due to caching problems. The iframe was not refreshed despite changing the src data in the iframe tag.
Most proposals found on the web with a Google search did’nt solve the problem on all browsers. By setting the src of the Iframe instead of changing the innerHTML of its container as shown hereafter the iframes are refreshed in the 3 browser’s IE, Firefox and Chrome.
<iframe id=”mypanel” src=”about:blank” width=”100%”
height=”100%” ></iframe>
<script type=”text/javascript”>
var i = 1 + Math.round(Math.random()*(2));
document.getElementById(‘mypanel’).src=’panel_’+i+’.html’
</script>
I would like to add that by using the <object> tag insted of the <iframe> tag, cross-browser problems are even worse.
Last update : June 24, 2014
You can create different clickable areas within an image using the usemap attribute together with the map tag. The usemap attribute of the img tag points to an map tag containing a description of the clickable areas that the map is divided into. The map tag has a id attribute to define its name, and also declares which areas are clickable by using the area tags.
An example of HTML code is shown below :
<img src="image.jpg"
width="150"
height="70"
usemap="#mymap">
<map id="mymap">
<area shape="rect"
href="start.html"
coords="0,0,48,28"
alt="blablabla" />
<area shape="circle"
href="previous.html"
coords="50,30,10"
alt="blablabla" />
<area shape="poly"
href="next.html"
coords="60,50,80,30,100,40,50,100"
alt="blablabla" />
</map>
The coordinates for the different shapes are :
In XHTML 1.0, the “usemap” attribute in the “img” element is defined as being a URI. This means that # (pound sign) can be used, as it specifies a link to a ‘fragment identifier’ in the current page. For the “map” element, the “id” attribute is required. In XHTML 1.1, the “usemap” attribute for the “map” element is an IDREF rather than a URI. This means that this value must be the same value as the “id” attribute of the other element.
The problem is that the valid code does’nt work in all browsers. If you want an image map that functions, you must write invalid XHTML 1.1 code. More infos about this topic are available at the Randsco website.
The name tag is required besides the id tag for the Firefox and Chrome browser’s. To embed a usemap in another HTML page, the object tag returns a wrong URL with embedded links. A workaround is to use iframes which work in most browsers.
ISMAP is part of the old-fashioned way of making image maps which originally required a server-side file as well as the HTML in the page.
We can add events (that can call a javascript) to the tags inside the image map. The tag supports the onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, and onBlur events.
A code example is shown hereafter :
<area shape =”circle” coords =”90,58,3″
onMouseOver=”writeText(‘The mouse is inside the circle.’)”
href =”about.html” target =”_blank” alt=”Blablabla” />
A useful program to set up image maps is Mapedit 4.0 5 from Boutell.com.
The following HTML code shows the basics of modern javascript programming :
<html>
<head>
<script type=”text/javascript” src=”helloworld.js”></script>
</head>
<body>
<p id=”hello”></p>
</body>
</html>
The concept is to keep the javascript separate from the HTML of the web page and to just use a script tag in the head section of the webpage to link the two together. An id tag is used to identify the part of the body of the web page that should be updated with javascript.
The javascript code is shown below :
function sayHello() {
document.getElementById(‘hello’).innerHTML = ‘Hello World’;
}
window.onload = sayHello;
In the past the function document.write() was used for this purpose, but this is “bad form” and not valid xhtml code. To adhere to strict xhtml code, then it would be better to create elements using document.createElement and element.appendChild (and other native DOM node manipulation functions). For inserting text into an existing element, innerHTML is still acceptable code (and completely cross-browser). The “all DOM” way requires a lot of extra code, is slower, harder to maintain than simpler method and it needs more bandwidth.
The alt attribute is designed to be an alternative text description for images. alt text displays before the image is loaded. It is a required element for images and can only be used for image tags.
In contrast, the title attribute can be used for any page element, but it isn’t required for any page element. Many search engine ranking algorithms read the text in title attributes as regular page content.
In the past, the alt text description was often used as a sort of pop-up tooltip on images. That was because the title attribute wasn’t widely supported. Today most browsers interpret the W3C specifications rather strictly – alt text no longer “pops up” when you run your mouse over an image. You have to use a title attribute for that.