Jag skulle nog lägga kartan som en bakgrund i css i table som jag delar i topp och botten. Toppen är nästan hela "bollen", nedre är en liten del av bollen plus rätt "tråd". Sedan kan du ju lägga celler i första raden för "rollover" och en "colspan" till giffen som är botten på rätt "kula" (eftersom linjen börjar en bit upp på bollen måste den ju delas) och den "tråd" som visar rätt på kartan. Alla bilder utom kartan som gif.
således 2 små gifar med bollar utan botten och 2 stora gifar med linjer med halv-boll per kategori. Kanske lite svår formulerat. Men hör av dig om det låter intressant.