1 Correct answer
What you want are called tooltips.
The simplest way to make a tooltip is with the TITLE attribute.
<a href="https://example.com" title="This is a link to example.com">LINK</a>
For fancier tooltips, see links below.
I don't recommend using Image Maps in responsive layouts. The hotspot coordinates invariably fall out of register when image is re-scaled. A safer approach is to use separate images, buttons or text links.
23
Replies
What you want are called tooltips.
The simplest way to make a tooltip is with the TITLE attribute.
<a href="https://example.com" title="This is a link to example.com">LINK</a>
For fancier tooltips, see links below.
I don't recommend using Image Maps in responsive layouts. The hotspot coordinates invariably fall out of register when image is re-scaled. A safer approach is to use separate images, buttons or text links.
Hi osgood, I am working on similar project and saw this code for reference. Could you please make this code workable since https://unpkg.com/vue/dist/vue.js call shows issue: page not found. [this page is around 2019 so a valid issue..]. Could you please send response to shalu[dot]p85[at]gmail[dot]com [if possible with HTML page]. Many Thanks.. Shailen
By @Shailen27
We are on version 3 of Vue js now so use the code below:
Use your own 'graphic.jpg' for the img src in the code below and number the @click="selectBook('0') starting from 0 to however many hostspot links there are.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://www.unpkg.com/vue@3"></script>
<title>Pop-Up Modal</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
}
.graphic {
width: 40%;
margin: 0 auto;
}
.graphic img {
max-width: 100%;
height: auto;
}
.modal-wrapper {
display: grid;
place-items: center;
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.6);
}
.modal-content {
width: 40%;
text-align: center;
background-color: #fff;
padding: 30px;
border-radius: 4px;
}
.modal-footer {
border-top: 1px solid #ccc;
padding: 20px 0 30px 0;
text-align: center;
}
.modal-footer button {
background-color: #000;
color: #fff;
border: none;
padding: 10px 15px;
font-size: 14px;
text-transform: uppercase;
border-radius: 4px;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
</head>
<body>
<div class="app">
<div class="graphic">
<img src="graphic.jpg" border="0" usemap="#Map" >
<map name="Map" id="Map">
<area shape="rect" coords="6,5,181,121" @click="selectBook('0')" >
<area shape="rect" coords="373,5,561,125" @click="selectBook('1')" >
<area shape="rect" coords="11,229,187,368" @click="selectBook('2')" >
<area shape="rect" coords="365,219,561,361" @click="selectBook('3')" >
</map>
</div>
<!-- end graphic -->
<transition name="fade">
<div class="modal-wrapper" v-if="modalWrapper">
<div class="modal-content" >
<h1>{{ bookTitle }} </h1>
<p>{{ bookDetails }} </p>
<h4>{{ bookAuthor }} </h4>
<p>{{ bookPdf }} </p>
<div class="modal-footer">
<button @click="closeModal">Close</button>
</div>
<!-- end modal-footer -->
</div>
<!-- end modal-content -->
</div>
<!-- end modal-wrapper -->
</transition>
</div>
<!-- end app -->
<script>
// Vue version 3
Vue.createApp({
el: '.app',
data() {
return {
modalWrapper: false,
bookTitle: '',
bookDetails: '',
bookPdf: '',
bookAuthor: '',
bookList: [
{ id: '1', title: 'Pride and Prejudice', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Jane Austen'},
{ id: '2', title: 'To Kill a Mockingbird ', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Harper Lee'},
{ id: '3', title: 'The Great Gatsby', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'F. Scott Fitzgerald'},
{ id: '4', title: 'Frankenstein', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Mary Shelley'}
],
}
},
methods: {
selectBook(index) {
this.modalWrapper = true;
this.bookTitle = this.bookList[index].title;
this.bookDetails = this.bookList[index].details;
this.bookPdf = this.bookList[index].pdf;
this.bookAuthor = this.bookList[index].author;
},
closeModal() {
this.modalWrapper = false;
}
}
}).mount('.app');
</script>
</body>
</html>
Hi osgood, I am working on similar project and saw this code for reference. Could you please make this code workable since https://unpkg.com/vue/dist/vue.js call shows issue: page not found. [this page is around 2019 so a valid issue..]. Could you please send response to shalu[dot]p85[at]gmail[dot]com [if possible with HTML page]. Many Thanks.. Shailen
By @Shailen27
You also have an option of using Alpine js instead of Vue js. They are much the same. Alpine js is just a bit more concise for simple stuff like this. Vue js is better for complex applications.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/alpinejs" defer></script>
<title>Pop-Up Modal</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
}
.graphic {
width: 40%;
margin: 0 auto;
}
.graphic img {
max-width: 100%;
height: auto;
}
.modal-wrapper {
display: grid;
place-items: center;
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.6);
}
.modal-content {
width: 40%;
text-align: center;
background-color: #fff;
padding: 30px;
border-radius: 4px;
}
.modal-footer {
border-top: 1px solid #ccc;
padding: 20px 0 30px 0;
text-align: center;
}
.modal-footer button {
background-color: #000;
color: #fff;
border: none;
padding: 10px 15px;
font-size: 14px;
text-transform: uppercase;
border-radius: 4px;
}
</style>
</head>
<body>
<div x-data="{
modalWrapper: false,
bookTitle: '',
bookDetails: '',
bookPdf: '',
bookAuthor: '',
bookList: [
{id: '1', title: 'Pride and Prejudice', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Jane Austen'},
{id: '2', title: 'To Kill a Mockingbird ', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Harper Lee'},
{id: '3', title: 'The Great Gatsby', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'F. Scott Fitzgerald'},
{id: '4', title: 'Frankenstein', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Mary Shelley'}
],
selectBook(index) {
this.modalWrapper = true;
this.bookTitle = this.bookList[index].title;
this.bookDetails = this.bookList[index].details;
this.bookPdf = this.bookList[index].pdf;
this.bookAuthor = this.bookList[index].author;
},
closeModal() {
this.modalWrapper = false;
}
}">
<div class="graphic">
<img src="graphic.jpg" border="0" usemap="#Map" >
<map name="Map" id="Map">
<area shape="rect" coords="6,5,181,121" @click="selectBook('0')" >
<area shape="rect" coords="373,5,561,125" @click="selectBook('1')" >
<area shape="rect" coords="11,229,187,368" @click="selectBook('2')" >
<area shape="rect" coords="365,219,561,361" @click="selectBook('3')" >
</map>
</div>
<!-- end graphic -->
<div class="modal-wrapper" x-show="modalWrapper" x-transition>
<div class="modal-content" >
<h1 x-text="bookTitle"></h1>
<p x-text="bookDetails"></p>
<h4 x-text="bookAuthor"></h4>
<p x-text="bookPdf"></p>
<div class="modal-footer">
<button @click="closeModal">Close</button>
</div>
<!-- end modal-footer -->
</div>
<!-- end modal-content -->
</div>
<!-- end modal-wrapper -->
</div>
<!-- end x-data -->
</body>
</html>
Hi osgood, I am working on similar project and saw this code for reference. Could you please make this code workable since https://unpkg.com/vue/dist/vue.js call shows issue: page not found. [this page is around 2019 so a valid issue..]. Could you please send response to shalu[dot]p85[at]gmail[dot]com [if possible with HTML page]. Many Thanks.. Shailen
By @Shailen27
You may even want to use plain old vanilla javscript without any dependency on frameworks:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pop-Up Modal</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
}
.graphic {
width: 40%;
margin: 0 auto;
}
.graphic img {
max-width: 100%;
height: auto;
}
.modal-wrapper {
display: none;
opacity: 0;
place-items: center;
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.6);
transition: opacity 500ms ease-in-out;
}
.modal-content {
width: 40%;
text-align: center;
background-color: #fff;
padding: 30px;
border-radius: 4px;
}
.modal-footer {
border-top: 1px solid #ccc;
padding: 20px 0 30px 0;
text-align: center;
}
.modal-footer button {
background-color: #000;
color: #fff;
border: none;
padding: 10px 15px;
font-size: 14px;
text-transform: uppercase;
border-radius: 4px;
}
.showModal {
display: grid!important;
}
.fullOpacity {
opacity: 1!important;
}
</style>
</head>
<body>
<div class="graphic">
<img src="graphic.jpg" border="0" usemap="#Map" >
<map name="Map" id="Map">
<area shape="rect" coords="6,5,181,121" onclick="selectBook('0')" >
<area shape="rect" coords="373,5,561,125" onclick="selectBook('1')" >
<area shape="rect" coords="11,229,187,368" onclick="selectBook('2')" >
<area shape="rect" coords="365,219,561,361" onclick="selectBook('3')" >
</map>
</div>
<!-- end graphic -->
<div class="modal-wrapper"></div>
<!-- end modal-wrapper -->
<script>
const modalWrapper = document.querySelector('.modal-wrapper');
bookList = [
{id: '1', title: 'Pride and Prejudice', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Jane Austen'},
{id: '2', title: 'To Kill a Mockingbird ', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Harper Lee'},
{id: '3', title: 'The Great Gatsby', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'F. Scott Fitzgerald'},
{id: '4', title: 'Frankenstein', details: 'Book details go here', pdf:'pdf_link_here.pdf', author: 'Mary Shelley'}
];
function selectBook(index) {
modalWrapper.classList.add('showModal');
setTimeout(function(){
modalWrapper.classList.add('fullOpacity');
}, 200)
modalWrapper.innerHTML = `
<div class="modal-content" >
<h1>${bookList[index].title}</h1>
<p>${bookList[index].details}</p>
<h4>${bookList[index].author}</h4>
<p>${bookList[index].pdf}</p>
<div class="modal-footer">
<button onclick="closeModal()">Close</button>
</div>
<!-- end modal-footer -->
</div>
<!-- end modal-content -->
`
};
function closeModal() {
modalWrapper.classList.remove('fullOpacity');
setTimeout(function(){
modalWrapper.classList.remove('showModal');
}, 500)
};
</script>
</body>
</html>
AdChoices