The best IR[Image Replacement] method
It is a technique for replacing the character with the image with Style Sheet[CSS].
When the image is simply displayed with <IMG> tag, it is not good.
A part of <IMG> tag alone cannot change the design only by changing only CSS without changing the HTML document when it is it,
and the advantage that uses CSS decreases though it is likely to think of.
For Japanese
Then, there seems to be only a method of using background image (background-image) under the present
situation though the technology that displays the image only with not the HTML document but Style Sheet has been this and that thought.
(Originally, because it is a background image, it cannot be said a too good technique.)
It is the best method that can be devised now.
It is displayed as a text in a browser for which CSS cannot be used.
When it is a setting to which the image is not displayed by being able to use CSS, the text is displayed.
JavaScript is not used.
It is read correctly by a voice browser.
There is no useless empty tag.
The image can be changed only with Style Sheet.
It corresponds to IE5 or more, Netscape6 or more, and Firefox, Opera6, and Safari.
Issues
A transparent image cannot be used.
(When the character position is devised to hide oneself in the image, it is good. )
It seems that it begins to be expected that the size of the character will be enlarged from the image under for Mac IE5.
(It is not good in those who inspect it though is good when some characters are reduced to hide oneself in the image even if it enlarges it.)
The solution is the under the page.
Kikky Method
HTML
It is displayed by CSS invalidity or non-display of the image. Content of image[It corresponds to alt]
CSS is invalidly displayed. Additional explanation of image[It corresponds to title]
CSS
width:155px;/*Width of image*/
height:55px;/*Height of image*/
position:relative;/*The outside frame is specified for a relative position.*/
font-size:70%;/*The character that exists in the background is small.This is not necessary.*/
/*It is not allowed to apply to Mac IE5.*/
/*It is measures when the character is large.*/
/* \*/
overflow: hidden;
/* */
}
h2 b{
background:url(img/method.gif) no-repeat;/*The image is displayed.*/
width:100%;/*It sets it as well as the width of the outside frame.*/
height:100%;/*It sets it as well as the height of the outside frame.*/
position:absolute;/*It absolutely specifies it for the position the outside frame.*/
top:0;/*It sets it to the upper part of the outside frame. IE6 measures. [The space can be done up by a specified doing it.]*/
left:0;/*It sets it to the left part of the outside frame. IE6 measures.*/
text-indent: -9999px;/*The character at the position of the image is driven out outside the screen.*/
z-index:1;/*The coming in succession order is done up for Opera 5 and 6*/
}
Example
Kikky MethodThe best Image Replacement method
When the image cannot be displayed, it becomes a way below.
HTML
CSS
width:155px;
height:55px;
position:relative;
font-size:70%;
/* \*/
overflow: hidden;
/* */
display:block;/*Because A tag is an in-line element, it changes to the block element.*/
}
a b{
background:url(img/method.gif) no-repeat;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:1;
text-indent: -9999px;
text-decoration: none;/*The under line is erased.*/
cursor: pointer;/*The finger is marked an exaggerated mouse it. IE6 measures.*/
}
Example
Kikky MethodThe best Image Replacement method
It is measures when the character is enlarged by the Kikky Method.
A monochrome background image is set up in the background of installation features.
The character color is matched to the color of the background image.
Then, if the character is large, it hides oneself by the color of the background image,
and only the character is seen because the background image is lost if the image cannot be displayed, too.
