Question

我提前道歉，我有非常适度的编码经验。

我正在尝试删除“鼠标悬停小工具”与Google网站中的图像之间的三像素边框，这在Chrome和Firefox中都有显示。我已经阅读了正确使用边框标记的问题 - 特别是关于图像如何在chrome中显示 - 所以怀疑这个位是“body {margin：0; border：0; padding：0;}”，但到目前为止运气不好。

这是代码，提前感谢任何帮助！

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs 
title="Image Mouseover"
title_url="http://sites.google.com/site/mori79/html-gadgets/how-tos/image-mouseover"
description="A gadget to create an image mouseover/rollover effect."
screenshot="http://lh6.googleusercontent.com/-jCm-Pj5NlI8/Tfh722Va6DI/AAAAAAAADzc/DPvpwd7jZYA/s800/image-mouseover_screenshot.png"
thumbnail="http://lh3.googleusercontent.com/-wnq0_4Zc5TE/Tfh72sPAf0I/AAAAAAAADzY/B5do0hJnAEY/s800/image-mouseover_thumbnail.png"
width="400"
height="300">
</ModulePrefs>
<UserPref name="originalImage" display_name="Original image" required="true" />
<UserPref name="rolloverImage" display_name="Rollover image" required="true" />
<UserPref name="text" display_name="Title / tooltip" />
<UserPref name="url" display_name="When clicked, go to URL" />
<UserPref name="target" display_name="Where to open the link" default_value="_parent" datatype="enum">
<EnumValue value="_parent" display_value="Same tab / window" />
<EnumValue value="_blank" display_value="New tab / window" />
</UserPref>
<Content type="html"><![CDATA[
<!DOCTYPE html>
<style type="text/css">
body {margin:0; border:0; padding:0;}
a, span {display:inline-block; background-image:url(__UP_rolloverImage__);}
a:hover img, span:hover img {visibility:hidden;}
</style>
<div id="container"></div><script type="text/javascript">
var prefs = new gadgets.Prefs();
var url = prefs.getString("url");
var target = prefs.getString("target");
var text = prefs.getString("text");
var originalImage = prefs.getString("originalImage");
var imgTag = '<img src="' + originalImage + '">';
var content;
if (url) {
content = '<a href="' + url + '" target="' + target + '" title="' + text + '">' + imgTag + '<\/a>';
}
else {
content = '<span title="' + text + '">' + imgTag + '<\/span>';
}
document.getElementById("container").innerHTML = content;
</script>]]></Content>
</Module>

Answer 1

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs 
title="Image Mouseover"
title_url="http://sites.google.com/site/mori79/html-gadgets/how-tos/image-mouseover"
description="A gadget to create an image mouseover/rollover effect."
screenshot="http://lh6.googleusercontent.com/-jCm-Pj5NlI8/Tfh722Va6DI/AAAAAAAADzc/DPvpwd7jZYA/s800/image-mouseover_screenshot.png"
thumbnail="http://lh3.googleusercontent.com/-wnq0_4Zc5TE/Tfh72sPAf0I/AAAAAAAADzY/B5do0hJnAEY/s800/image-mouseover_thumbnail.png"
width="400"
height="300">
</ModulePrefs>
<UserPref name="originalImage" display_name="Original image" required="true" />
<UserPref name="rolloverImage" display_name="Rollover image" required="true" />
<UserPref name="text" display_name="Title / tooltip" />
<UserPref name="url" display_name="When clicked, go to URL" />
<UserPref name="target" display_name="Where to open the link" default_value="_parent" datatype="enum">
<EnumValue value="_parent" display_value="Same tab / window" />
<EnumValue value="_blank" display_value="New tab / window" />
</UserPref>
<Content type="html"><![CDATA]><!--here you did not close-->
<!DOCTYPE html>
<style type="text/css">
body {margin:0; border:0; padding:0;}
a, span {display:inline-block; background-image:url(__UP_rolloverImage__);}
a:hover img, span:hover img {visibility:hidden;}
</style>
<div id="container"></div><script type="text/javascript">
var prefs = new gadgets.Prefs();
var url = prefs.getString("url");
var target = prefs.getString("target");
var text = prefs.getString("text");
var originalImage = prefs.getString("originalImage");
var imgTag = '<img src="' + originalImage + '">';
var content;
if (url) {
content = '<a href="' + url + '" target="' + target + '" title="' + text + '">' + imgTag + '<\/a>';
}
else {
content = '<span title="' + text + '">' + imgTag + '<\/span>';
}
document.getElementById("container").innerHTML = content;
</script></Content><!--here was the closing brackets-->
</Module>

删除Google协作平台小工具（css）周围的边框

1 个答案: