Entfernen Sie den Rahmen um Google Sites Gadget (CSS)

Entschuldigung im Voraus, ich habe sehr bescheiden Codierungserfahrung.Entfernen Sie den Rahmen um Google Sites Gadget (CSS)

Ich versuche zu entfernen, was wie eine drei Pixel Grenze zwischen einem "Mouseover-Gadget" und einem Bild auf Google-Websites aussieht, die in Chrome und Firefox angezeigt wird. Ich habe über Probleme bei der richtigen Verwendung des Border-Tags gelesen - insbesondere im Hinblick darauf, wie Bilder in Chrome angezeigt werden -, also vermute das Bit, das "body {margin: 0; border: 0; padding: 0;}" aber haben bisher nicht viel Glück.

Hier ist der Code, danke im Voraus für jede Hilfe!

<?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>

Quelle

2016-03-25 SteveB

-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>

Quelle

2016-03-25 17:26:17 DanyCode

Wenn dies tatsächlich eine Antwort, müssen Sie eine Erklärung, geben, was Sie getan haben. Nicht nur Dump-Code und hoffe, dass jeder versteht. – j08691

@ j08691 Ich habe gerade in den Code geschrieben, wo er falsch lag, und dann wollte ich kommentieren – DanyCode

DanyCode

Entfernen Sie den Rahmen um Google Sites Gadget (CSS)

Antwort

Verwandte Themen