Kartenvorschau bei den Regelfragen

i-do-youdo · **Verfasst:** 18.02.2010, 17:03

Hallo Admin,
mal eine Frage. Mir ist auf einer anderen Forumsseite aufgefallen, dass dort beim Überstreichen von Links die Karte und der Kartentext zu der Magiccarte in einem Vorschaufenster angezeigt wird.
Da habe ich mir gedacht: „Was die können, können wir auch“. Ich fände dieses Feature besonders bei den Deckbesprechungen, Kartenbesprechungen und Regelfragen sehr sinnvoll.
Deshalb habe ich mich mal vorab drangesetzt und JavaScript Funktionen entwickelt, die zumindest das Bild als Vorschau in den Vordergrund bringen können. Beim Regeltext ist mir dies noch nicht gelungen.
Meine Frage ist natürlich die, ob wir die Funktionen nutzen können, natürlich eine Referenz zur Quelle magiccards.info vorausgesetzt.
Hier der JavaScript Code, der auf jeder Seite eingebettet werden muss (kann man auch auslagern und dynamisch in die einzelnen Seiten einbinden):

Code:

// --- KARTENVORSCHAU -------------------------------------------------------
// Suche aller Links im Dokument und füge ihnen Ereignisbehandlungsroutinen hinzu
function findlnk()
{
 var lnks,i;

 lnks=document.getElementsByTagName('a');
 for(i=0;i<lnks.length;i++)
 {
   lnks[i].onmouseover=function(){preview(this.href, this.hostname, position(this)[0]+30, position(this)[1]+30);};
   lnks[i].onmouseout=function(){previewoff();};
 }
}

// Zeigt die Vorschau der Karte an, wenn der Link auf magiccards.info zeigt und auf dem Link mit der Maus gezeigt wird
function preview(surl, shost, ilinks, ioben)
{
 var odivpreview;
 var oframe;
 var sImageUrl;
 var IMAGEWIDTH = 225;
 var IMAGEHEIGHT = 300;
 
 var saSplit;
 
 if( shost == 'magiccards.info' )
 {
    odivpreview = document.getElementById('divpreview');

   saSplit = surl.split("/");
   sImageUrl = saSplit[0] + '//' + shost + '/scans/' + saSplit[4] + '/' + saSplit[3] + '/';
   sImageUrl+= saSplit[5].replace('.html', '.jpg');
   
   //debug: Später vielleicht Rules text//odivpreview.innerHTML = "<iframe src='"+surl+"' id='framepreview' width=180 height=240 frameborder=1 scrolling=no><br><small>Quelle: magiccards.info</small>";
   odivpreview.innerHTML = "<img src='"+sImageUrl+"' id='framepreviewimg' width="+IMAGEWIDTH+"' height="+IMAGEHEIGHT+" /><br /><small> Quelle: magiccards.info</small>";
   odivpreview.style.position = 'absolute';
   odivpreview.style.left = ilinks + 'px';
   odivpreview.style.top = ioben + 'px';
   odivpreview.style.visibility = 'visible';
   odivpreview.border = 1;
 }
}

// Blendet beim Verlassen eines links die Vorschau aus
function previewoff()
{
 var odivpreview;
 odivpreview = document.getElementById('divpreview');
 odivpreview.style.visibility = 'hidden';
}

// Gibt die Position eines Elements in Relation zum Fenster zurück
// Ein Objekt speichert immer nur die Position relativ zum übergeordneten Objekt. Deswegen muss addiert werden
function position(objekt)
{
   var ileft = itop = 0;
   do 
   {
      ileft += objekt.offsetLeft;
      itop += objekt.offsetTop;
   } while (objekt = objekt.offsetParent);
   return [ileft,itop];
}

// Beim Seitenaufbau soll das Vorschaufenster ausgeblendet werden
// und die Ereignisbehandler für die Links hinzugefügt werden
window.onload=function()
{
 previewoff();
 findlnk();
}

// -------------------------------------------------------------------------------------

Zusätzlich muss es auf den Seiten ein div Tag geben. Vielleicht kann man das Skript ja auch noch so verbessern, dass das Tag automatisch erzeugt wird.

Code:

<div id="divpreview" style="visibility:hidden">Kartenvorschau auf magiccards.info</div>

nicoley · **Verfasst:** 18.02.2010, 17:18

hört sich erstmal interessant an - ich werde mir das morgen noch in Ruhe anschauen aber auf jedenfall schon mal Danke für die gute Idee.

Odyssey · **Verfasst:** 18.02.2010, 20:02

i-do-youdo hat geschrieben:

Mir ist auf einer anderen Forumsseite aufgefallen, dass dort beim Überstreichen von Links die Karte und der Kartentext zu der Magiccarte in einem Vorschaufenster angezeigt wird.

schick doch sonst den link des entsprechenden Forum dem Admin über pm, vereinfacht die Vorstellung.....

i-do-youdo · **Verfasst:** 19.02.2010, 09:47

Wieso, kann ich doch auch hier einstellen ;-)

NeroBP · **Verfasst:** 19.02.2010, 10:22

das mit dem Bild finbde ich 1000x besser als das mit dem Text.

i-do-youdo · **Verfasst:** 19.02.2010, 11:04

Auch wenn du meine Idee unterstützt hätte ich aus Sicht des Anwenders (und das bin ich ja überwiegend hier) lieber den aktuellen Regeltext, weil der Kartentext auf älteren Karten zum Teil wirklich falsch ist!
Optimal fände ich natürlich die Lösung, links das Bild in Miniaturgröße und rechts den Text anzuzeigen. Das Ganze darf allerdings nicht zu groß werden. Außerdem stehe ich noch vor dem Problem, den Regeltext nicht auslesen zu können. Ich habe diesbezüglich eine Anfrage an magiccards.info gestellt, um herauszufinden, ob sie einen Webservice anbieten, der die Daten liefern würde.
Den Webservice müsste man dann aber wahrscheinlich mit php abfragen. Ich glaube nicht, dass JavaScript das kann.

Ich habe mal geschaut, wie das mtg-forum zum Text kommt. Wie es aussieht, haben die sich eine eigene Datenbank aufgebaut. Da haben sie natürlich mehr Möglichkeiten. Ich glaube aber nicht, dass zur Pflege so einer Datenbank jemand von uns Lust hat

Wir sind also auf das Schnittstellenangebot von gatherer, magiccards.info & Co. angewiesen (ich weiß nicht, ob wir mtg-forum fragen sollten :mrgreen:

)

NeroBP · **Verfasst:** 19.02.2010, 12:10

man kann auch einfach das Bild hinmachen (ist ja mit einem MouseOver-Effekt versehen) und auf klick wird ein Fenster zu magiccards.info gehöffnet mit der Karte (onClick).
Normalerwiese sollte man die Karten auch kennen mit dem erata-Text. Und wenn nicht benutzt man halt den einen Klick :s

i-do-youdo · **Verfasst:** 19.02.2010, 14:09

So ist das auch in der oben genannten Lösung.
Mir ist klar, dass das reine Geschmackssache ist, aber wenn ich irgendwo einen Link zu einer Magickarte sehe, dann will ich meistens wissen, was die macht und seltener, wie sie aussieht. Deswegen mag ich den umgekehrten Fall lieber. Erst den Text anzeigen lassen und wenn ich das Bild sehen will oder irgendwelche Regelhinweise oder den Preis oder die Auflistung aller Editionen, die diese Karte beinhalten aufgelistet bekommen möchte, dann klicke ich auf den Link.

NeroBP · **Verfasst:** 19.02.2010, 14:42

naja,ich sehe das ehr aus Sicht eines Tunierspielers: Der Gegner legt eine Karte und anhand des Bildes sehe ich, was die Karte kann. Wer kennt schon alle Namen? Die meisten wissen, was die Karte macht, wenn sie das Bild sehen.
Keine Lösung kenne ich auch irgendwo her und ich finde die sowas von unhandlich.
Naja...
Müss die Mehrheit oder unser Admin entscheiden

nicoley · **Verfasst:** 19.02.2010, 17:23

NeroBP hat geschrieben:

.....
Müss die Mehrheit oder unser Admin entscheiden

Erst die Mehrheit - wens keine gibt dann Endscheiden die Admins/Mods

NeroBP's ansatz schein mir am flexiebelsten zu sein !

@i-do-youdo bevor ich anfange das zu testen - schreib bitte wann es funktioniert - das einbauen sollte dann nicht mehr das Problem sein.

Sanfte Feder · **Registriert:** 15.06.2006, 16:45 **Beiträge:** 2400

NeroBP hat geschrieben:

naja,ich sehe das ehr aus Sicht eines Tunierspielers: Der Gegner legt eine Karte und anhand des Bildes sehe ich, was die Karte kann. Wer kennt schon alle Namen? Die meisten wissen, was die Karte macht, wenn sie das Bild sehen.
Keine Lösung kenne ich auch irgendwo her und ich finde die sowas von unhandlich.
Naja...
Müss die Mehrheit oder unser Admin entscheiden

Sehe ich ähnlich. Wenn ich das Bild sehe, weiß ich sofort worum es geht. Bei "nur" Text muß ich erst den ganzen Text lesen, und dann noch drüber sinnieren.^^
Irgendwelche Regeltexte suche ich mir erst, wenn sie gebraucht werden. Ideal ist natürlich magiccards.info, wo beides steht.

Vote für Bild.

mfG

Brennender_Drache · **Verfasst:** 19.02.2010, 20:01

ganz klar

bild >>> Text

LionC · **Registriert:** 21.09.2008, 11:31 **Beiträge:** 309

Bild > Text
+aus den bereits genanntren Gründen(ich verbinde eine Karte ehr mit dem Artwork als mit dem Namen -> zumal das Artwork international is im Ggeensatz zum namen)

i-do-youdo · **Verfasst:** 21.02.2010, 20:40

nicoley hat geschrieben:

@i-do-youdo bevor ich anfange das zu testen - schreib bitte wann es funktioniert - das einbauen sollte dann nicht mehr das Problem sein.

Öhm, ich weiß jetzt nicht so richtig, was ich darauf antworten soll

Es würde jetzt schon funktionieren, und zwar mit dem oben genannten Quellcode. Und im Screenshot (der ohne Bilder) sieht man, wie es funktionieren würde. Man streicht mit der Maus über einen Link, und anhand der Links wird a) erkannt, ob es ein magiccards.info Link ist und b) die URL auf das Bild umgebogen, welches dann rechts unter dem Link angezeigt wird. Wenn man dann mit der Maus weg vom Link fährt, dann verschwindet das Bild wieder.

Ich habe noch eine Verbesserung, weil man auch Sammelqueries auf magiccards.info als Link einbetten kann, hat die Funktion natürlich Probleme zu entscheiden, welches Bild angzeigt werden soll, deswegen muss die Länge des URL Feldes abgefragt werden:

Statt

Code:

// Zeigt die Vorschau der Karte an, wenn der Link auf magiccards.info zeigt und auf dem Link mit der Maus gezeigt wird
function preview(surl, shost, ilinks, ioben)
{
 var odivpreview;
 var oframe;
 var sImageUrl;
 var IMAGEWIDTH = 225;
 var IMAGEHEIGHT = 300;

 var saSplit;

 if( shost == 'magiccards.info' )
 {
    odivpreview = document.getElementById('divpreview');

   saSplit = surl.split("/");
   sImageUrl = saSplit[0] + '//' + shost + '/scans/' + saSplit[4] + '/' + saSplit[3] + '/';
   sImageUrl+= saSplit[5].replace('.html', '.jpg');
   
   //debug: Später vielleicht Rules text//odivpreview.innerHTML = "<iframe src='"+surl+"'  id='framepreview' width=180 height=240 frameborder=1 scrolling=no><br><small>Quelle: magiccards.info</small>";
   odivpreview.innerHTML = "<img src='"+sImageUrl+"' id='framepreviewimg' width="+IMAGEWIDTH+"' height="+IMAGEHEIGHT+" /><br /><small> Quelle: magiccards.info</small>";
   odivpreview.style.position = 'absolute';
   odivpreview.style.left = ilinks + 'px';
   odivpreview.style.top = ioben + 'px';
   odivpreview.style.visibility = 'visible';
   odivpreview.border = 1;
 }
}

sollte da besser stehen:

Code:

// Zeigt die Vorschau der Karte an, wenn der Link auf magiccards.info zeigt und auf dem Link mit der Maus gezeigt wird
function preview(surl, shost, ilinks, ioben)
{
 var odivpreview;
 var oframe;
 var sImageUrl;
 var IMAGEWIDTH = 225;
 var IMAGEHEIGHT = 300;

 var saSplit;

 if( shost == 'magiccards.info' )
 {
    odivpreview = document.getElementById('divpreview');

    saSplit = surl.split("/");
    if (saSplit.length > 5)
    {
      sImageUrl = saSplit[0] + '//' + shost + '/scans/' + saSplit[4] + '/' + saSplit[3] + '/';
      sImageUrl+= saSplit[5].replace('.html', '.jpg');
   
      //debug: Später vielleicht Rules text//odivpreview.innerHTML = "<iframe src='"+surl+"' id='framepreview' width=180 height=240 frameborder=1 scrolling=no><br><small>Quelle: magiccards.info</small>";
      odivpreview.innerHTML = "<img src='"+sImageUrl+"' id='framepreviewimg' width="+IMAGEWIDTH+"' height="+IMAGEHEIGHT+" /><br /><small> Quelle: magiccards.info</small>";
      odivpreview.style.position = 'absolute';
      odivpreview.style.left = ilinks + 'px';
      odivpreview.style.top = ioben + 'px';
      odivpreview.style.visibility = 'visible';
      odivpreview.border = 1;
    }
 }
}

Ich würde den gesamten Text jedoch wie erwähnt auslagern, das heißt alles in eine Textdatei (zum Beispiel mit Notepad) Namens preview.js speichern und auf Scripts/preview.js ablegen. Ist nur ein Beispiel.

Auf den einzelnen Forenseiten, auf denen die Funktion aktiv sein soll, muss lediglich im HEAD Bereich der Seite

Code:

<script type="text/javascript" src="http://www.magic-the-gathering-forum.de/Scripts/preview.js"></script>

hinzugefügt werden
Die zweite und letzte Aktion muss es sein, auf der betreffenden Seite im BODY Bereich

Code:

<div id="divpreview" style="visibility:hidden">Kartenvorschau auf magiccards.info</div>

hinzuzufügen.

Bei Problemen kannst du mir auch gerne eine persönliche Nachricht schicken.

i-do-youdo · **Verfasst:** 22.02.2010, 14:37

Ich habe mal eine einfache HTML Seite erstellt mit ein paar Beispiel Links (deutsche Karten, englische Karten, alte Karten, neue Karten, Links, die nicht funktionieren,...)

Hier ist der JavaScript Code direkt enthalten. Das bedeutet also, dass ihr die Seite direkt von eurem Rechner aus nutzen könnt.
Ich teste ausschließlich (weil ich so bequem bin) im Internet Explorer. Vielleicht kann noch einer Feedback mit Firefox & Co. geben.

(Nanu, wo ist der Anhang geblieben? Ah verstehe, .html ist nicht erlaubt. Dann packe ich es in ein WinRar Archiv)

Jetzt auch im Shop: Zendikar - englisch

Kartenvorschau bei den Regelfragen

Wer ist online?