how can i do to display a card image when i hover the mouse, but on a word that's not its name?

TappedOut forum

Posted on Sept. 28, 2015, 5:53 p.m. by Chino90

First of all, i know this is a formatting question, but I searched there and it isn't answered. So I came here.

I am making a deck description, and i want cards to display when i hover the mouse over words that i chose but are not their names. For example, i want to write "this mighty dragon" and have Icefall Regent appear when hovering over that phrase or a single word.

Thanks a lot.

Epochalyptik says... #1

This thread was moved to a more appropriate forum (auto-generated comment)

Edit: As a general rule, if you know that a certain kind of question belongs in a certain section, please do not go somewhere else to ask it.

September 28, 2015 6:10 p.m.

yeaGO says... #2

you can view source and copy the html for a normal link to a card and then paste it into your deck description and replace the text with whatever you like.

September 28, 2015 6:18 p.m.

yeaGO says... #3

<span class="card card-type-creature card-color-blue card-color-blue-cost-5 card-color-red-cost-5 card-color-black-cost-5 card-color-green-cost-5 card-color-white-cost-5" data-original-title="" title=""><a rel="popover" data-original-title="FOO" class="card-link card-hover" href="/mtg-card/icefall-regent/" data-image="http://static.tappedout.net/mtg-cards-2/Dragons-of-Tarkir/icefall-regent/mtg-cards/_user-added/femme_fatale-icefall-regent-dtk-14261768300_medium.png" data-show-price="true" data-tcg-price="1.43" data-tcg-foil-price="4.71" data-cardhoarder-price="0.4" data-cardhoarder-foil-price="0.41" data-name="Icefall Regent" data-foil="">


Icefall Regent OR WHATEVER YOU WANT HERE



</a><span class="screen hide image-box">
            
                <img src="http://static.tappedout.net/mtg-cards-2/Dragons-of-Tarkir/icefall-regent/mtg-cards/_user-added/femme_fatale-icefall-regent-dtk-14261768300_medium.png" class="screen card-popover" alt="MTG Card: Icefall Regent">
</span></span>

Bear in mind, this might break eventually.

September 28, 2015 6:22 p.m. Edited.

FancyTuesday says... #4

To do this you would have to use the HTML TappedOut creates around linked cards and replace the text it builds the <a> field around. So:

<span; class="card card-type-creature card-color-blue card-color-blue-cost-5 card-color-red-cost-5 card-color-black-cost-5 card-color-green-cost-5 card-color-white-cost-5" data-original-title="" title="">
    <a; rel="popover" data-original-title="FOO" class="card-link card-hover" href="/mtg-card/icefall-regent/" data-image="http://static.tappedout.net/mtg-cards-2/Dragons-of-Tarkir/icefall-regent/mtg-cards/_user-added/femme_fatale-icefall-regent-dtk-14261768300_medium.png" data-show-price="true" data-tcg-price="1.43" data-tcg-foil-price="4.71" data-cardhoarder-price="0.4" data-cardhoarder-foil-price="0.41" data-name="Icefall Regent" data-foil="">This; mighty dragon
    <span; class="screen hide image-box">
        <img; src="http://static.tappedout.net/mtg-cards-2/Dragons-of-Tarkir/icefall-regent/mtg-cards/_user-added/femme_fatale-icefall-regent-dtk-14261768300_medium.png" class="screen card-popover" alt="MTG Card: Icefall Regent">
    </span>
</span>

Produces:
This mighty dragon

For some reason the code section is sticking a lot of semicolons I didn't put in there. Damn plain text is hard on this site.

Edit: It even ate a few of the element closers. Good thing yeaGO beat me to the punch with some code that didn't get garbled.

September 28, 2015 6:27 p.m. Edited.

FancyTuesday says... #5

Here we go. A bit late, but without weird semicolons or missing tag closes, and I removed the unnecessary price-showing info from <a> since it wasn't included in yeaGO's or my own example because I couldn't get the <p> tag to render inside the popup.

Also cleaned out the span class, it's still working as far as I can tell so I'm not sure what all the values after "card" were for. If I had to guess it was for some system where the CMC and card type mattered to the element it would display.

<span class="card">
    <a rel="popover" data-original-title="FOO" class="card-link card-hover" href="/mtg-card/icefall-regent/" data-image="http://static.tappedout.net/mtg-cards-2/Dragons-of-Tarkir/icefall-regent/mtg-cards/_user-added/femme_fatale-icefall-regent-dtk-14261768300_medium.png" data-show-price="false" data-name="Icefall Regent" data-foil="">
        This mighty dragon
    </a>
    <span class="screen hide image-box">
        <img src="http://static.tappedout.net/mtg-cards-2/Dragons-of-Tarkir/icefall-regent/mtg-cards/_user-added/femme_fatale-icefall-regent-dtk-14261768300_medium.png" class="screen card-popover" alt="MTG Card: Icefall Regent">
    </span>
</span>

This mighty dragon

September 28, 2015 6:57 p.m. Edited.

Chino90 says... #6

Wow! Thanks a lot yeaGO and FancyTuesday! Thank you both for your troubles. I thought it could be something simpler. I am no programmer, so this would have been impossible for me.

Sorry for the late answer, i was driving home.

September 28, 2015 7:02 p.m.

kalko says... #7

Hey, sorry, but I didn't quite get this, could you put something like a code that I can edit for any card? (I don't think its possible but I don't know about this)

December 16, 2015 8:07 p.m.

kalko says... #8

Oh, I figured it out, thanks for putting this up anyways :)

December 16, 2015 9:39 p.m.