Avatar billede hanibald Mester
09. marts 2020 - 20:45 Der er 4 kommentarer

HTML Area Farve

Jeg har lagt et antal areas ind over et billede. F.eks:
<area shape="circle" id="102" coords="190,158,10" href="#" alt="Punkt 102">

For alle areas har jeg behov for, at der vises statisk rød, når et area er inaktivt, og statisk grøn, når det er aktivt (efter "mouse up")

(CSS fra Bootstrap 4)

Hvordan kan jeg tilføje disse farver?
Avatar billede hanibald Mester
09. marts 2020 - 20:51 #1
Min kode til billede og mappe ser sådan ud:
<img src="plantegning.png" class="mx-auto" width="1028" height="765" alt="Plantegning" usemap="#plantegning">
<map name="plantegning">
<area shape="circle" id="102" coords="190,158,10" href="#" alt="Punkt 102">
</map
Avatar billede jakobdo Ekspert
09. marts 2020 - 20:58 #2
Kunne det være:

area:hover {background-color: green} i css ?
Avatar billede Slater Ekspert
09. marts 2020 - 22:05 #3
Et <area> er bare et klikbart stykke af et billede, det kan ikke have baggrundsfarver osv på.

Hvis du vil have en cirkel der er et link og som kan have en baggrundsfarve, kan du bruge et helt almindeligt <a> tag, give det en absolut position og border-radius: 50%; - det giver et cirkulært link der kan styles som ethvert andet element. Skal det være en mere unik form, er du nok nødt til at bruge canvas eller svg. Men <area> kan ikke.
Avatar billede hanibald Mester
11. marts 2020 - 00:11 #4
Tak for kommentarerne. Nu synes jeg at være næsten i mål med denne kode:
<style>
.absz{
    position: absolute;
    z-index: 1;
}
</style>   

    <div class="row pb-2"> <!-- Plantegning billede -->
        <div class="col-12 d-flex">
            <img src="plantegning.png" class="mx-auto" width="1028" height="765" alt="Plantegning">
            <div>
            <a  id="101" class="absz" style="top:50px;left:50px" href="#">x</a>
            </div>
        </div>
    </div><!-- row -->

Eneste udestående nu synes at være at "left" starter fra venstre side af container og ikke fra venstre side af billede.

Er det et "div"-problem eller et "mx-auto"-problem???
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester