CODEWITHSUNDEEP
htmlvue.jsvuetify.js
monkeydkon
monkeydkon

Reputation: 105

How to add a map to a vuetify image

Is there any way that i can map my v-img to a normal html map?

This is my code.

<template>
    <v-container>

        <v-row class="mx-1">
            <v-col cols="12">
                <v-row justify="center">
                    <v-img contain src="/img/home-page.jpg" :aspect-ratio="1/2.25" max-width="400px" max-height="100%"></v-img>
                </v-row>
            </v-col>
        </v-row>
    </v-container>
</template>

There is nothing in the Vuetify docs. So maybe there is a custom way to perform this?

Upvotes: 0

Views: 1476

Answers (2)

monkeydkon
monkeydkon

Reputation: 105

So I figured out the answer thanks to the response here. 

<template>
    <v-container>
        <v-row class="mx-1">
            <v-col cols="12">
                <v-row justify="center">
                    <v-img usemap="" class="image" contain src="/img/home-page.jpg" :aspect-ratio="1/2" max-width="400px" max-height="100%">
                        <router-link tag="a" to="/first"> 
                            <a  style="position:absolute; top: 35%; right: 18%; height:10%; width: 10%;"></a>
                        </router-link>
                    </v-img>

                </v-row>
            </v-col>
        </v-row>
    </v-container>
</template>

I put a router-link inside my v-img and an a tag inside that.

Upvotes: 1

Acerbic
Acerbic

Reputation: 108

I could not find a way to make use of the map html tag because <v-img> is a div under the hood.

I found this work around using anchors (in the example is black to make it visible).

https://jsfiddle.net/ndja5Lsc/26/

Upvotes: 1

Related Questions