Using the images stored with blogger could be tricky. There is no doubt that the image can be displayed correctly if you use exactly the code provided by blogger.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dTd1RVdaar9KTLCks9J022j3MxwYgjx7fIjXCTaj1COwHcxCAEge4DKoFhoFNuFs9mGxkc4yXFby9JiZbzIuwBFSe9Qb9vKkgqZxrUR-gZdcFhksqi4IlVW8UZylPZAcge3Dw2UlaTM/s1600-h/rat_cheese.gif">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 230px; height: 320px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dTd1RVdaar9KTLCks9J022j3MxwYgjx7fIjXCTaj1COwHcxCAEge4DKoFhoFNuFs9mGxkc4yXFby9JiZbzIuwBFSe9Qb9vKkgqZxrUR-gZdcFhksqi4IlVW8UZylPZAcge3Dw2UlaTM/s320/rat_cheese.gif"
border="0" alt=""
id="BLOGGER_PHOTO_ID_5336176003028964418" />
As you may notice in the above code, the references specified in href and src are no much difference except for one directory hierarchy: href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dTd1RVdaar9KTLCks9J022j3MxwYgjx7fIjXCTaj1COwHcxCAEge4DKoFhoFNuFs9mGxkc4yXFby9JiZbzIuwBFSe9Qb9vKkgqZxrUR-gZdcFhksqi4IlVW8UZylPZAcge3Dw2UlaTM/s1600-h/rat_cheese.gif">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 230px; height: 320px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dTd1RVdaar9KTLCks9J022j3MxwYgjx7fIjXCTaj1COwHcxCAEge4DKoFhoFNuFs9mGxkc4yXFby9JiZbzIuwBFSe9Qb9vKkgqZxrUR-gZdcFhksqi4IlVW8UZylPZAcge3Dw2UlaTM/s320/rat_cheese.gif"
border="0" alt=""
id="BLOGGER_PHOTO_ID_5336176003028964418" />
- href uses the image in s1600-h: the image looks original or bigger.
- src uses the image in s320: the image is shrunk or smaller.
<img style="display:block; margin:0px auto 10px; text-align:center;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dTd1RVdaar9KTLCks9J022j3MxwYgjx7fIjXCTaj1COwHcxCAEge4DKoFhoFNuFs9mGxkc4yXFby9JiZbzIuwBFSe9Qb9vKkgqZxrUR-gZdcFhksqi4IlVW8UZylPZAcge3Dw2UlaTM/s320/rat_cheese.gif"
border="0" alt="Using s320"
id="BLOGGER_PHOTO_ID_5336176003028964418" />
With the image specified in s1600-h directory, the image cannot be displayed:
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dTd1RVdaar9KTLCks9J022j3MxwYgjx7fIjXCTaj1COwHcxCAEge4DKoFhoFNuFs9mGxkc4yXFby9JiZbzIuwBFSe9Qb9vKkgqZxrUR-gZdcFhksqi4IlVW8UZylPZAcge3Dw2UlaTM/s320/rat_cheese.gif"
border="0" alt="Using s320"
id="BLOGGER_PHOTO_ID_5336176003028964418" />
<img style="display:block; margin:0px auto 10px; text-align:center;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dTd1RVdaar9KTLCks9J022j3MxwYgjx7fIjXCTaj1COwHcxCAEge4DKoFhoFNuFs9mGxkc4yXFby9JiZbzIuwBFSe9Qb9vKkgqZxrUR-gZdcFhksqi4IlVW8UZylPZAcge3Dw2UlaTM/s1600-h/rat_cheese.gif"
border="0" alt="Using s1600-h"
id="BLOGGER_PHOTO_ID_5336176003028964418" />
In order to reference the bigger image, you have to use the undocumented directory s1600 for image reference, not s1600-h:
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dTd1RVdaar9KTLCks9J022j3MxwYgjx7fIjXCTaj1COwHcxCAEge4DKoFhoFNuFs9mGxkc4yXFby9JiZbzIuwBFSe9Qb9vKkgqZxrUR-gZdcFhksqi4IlVW8UZylPZAcge3Dw2UlaTM/s1600-h/rat_cheese.gif"
border="0" alt="Using s1600-h"
id="BLOGGER_PHOTO_ID_5336176003028964418" />
<img style="display:block; margin:0px auto 10px; text-align:center;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dTd1RVdaar9KTLCks9J022j3MxwYgjx7fIjXCTaj1COwHcxCAEge4DKoFhoFNuFs9mGxkc4yXFby9JiZbzIuwBFSe9Qb9vKkgqZxrUR-gZdcFhksqi4IlVW8UZylPZAcge3Dw2UlaTM/s1600/rat_cheese.gif"
border="0" alt="Using s1600"
id="BLOGGER_PHOTO_ID_5336176003028964418" />
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0dTd1RVdaar9KTLCks9J022j3MxwYgjx7fIjXCTaj1COwHcxCAEge4DKoFhoFNuFs9mGxkc4yXFby9JiZbzIuwBFSe9Qb9vKkgqZxrUR-gZdcFhksqi4IlVW8UZylPZAcge3Dw2UlaTM/s1600/rat_cheese.gif"
border="0" alt="Using s1600"
id="BLOGGER_PHOTO_ID_5336176003028964418" />
No comments:
Post a Comment