How to use image-map on jssor. its not working, the link disappears. I have tried the given code.
<div id="jssor_4" style="position:relative;margin:0 auto;top:0px;left:0px;width:1500px;height:300px;overflow:hidden;visibility:hidden;">
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1500px;height:300px;overflow:hidden;">
<div>
<img data-u="image" src="/images/banner-animasi1.jpg" usemap="#image-map1" style="width:100%" />
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb108" style="position:absolute;bottom:0px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
<div data-u="prototype" class="i" style="width:16px;height:16px;">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="b" cx="8000" cy="8000" r="5800"></circle>
</svg>
</div>
</div>
</div>
</div>
<map name="image-map1">
<area target="_self" alt="Tentang kami" title="Tentang kami" href="/about" coords="2666,758,3540,922" shape="rect">
</map>
Any suggestion or help will be appreciated. Thanks
Related
I need side bar in laravel jetstream inertia vue
enter image description here
<script setup>
import { ref } from 'vue';
import { Inertia } from '#inertiajs/inertia';
import { Head, Link } from '#inertiajs/inertia-vue3';
import ApplicationMark from '#/Components/ApplicationMark.vue';
import Banner from '#/Components/Banner.vue';
import Dropdown from '#/Components/Dropdown.vue';
import DropdownLink from '#/Components/DropdownLink.vue';
import NavLink from '#/Components/NavLink.vue';
import ResponsiveNavLink from '#/Components/ResponsiveNavLink.vue';
defineProps({
title: String,
});
const showingNavigationDropdown = ref(false);
const switchToTeam = (team) => {
Inertia.put(route('current-team.update'), {
team_id: team.id,
}, {
preserveState: false,
});
};
const logout = () => {
Inertia.post(route('logout'));
};
</script>
<template>
<div>
<Head :title="title" />
<Banner />
<div class="min-h-screen bg-gray-100">
<nav class="bg-white border-b border-gray-100">
<!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<!-- Logo -->
<div class="shrink-0 flex items-center">
<Link :href="route('dashboard')">
<ApplicationMark class="block h-9 w-auto" />
</Link>
</div>
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<NavLink :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</NavLink>
</div>
</div>
<div class="hidden sm:flex sm:items-center sm:ml-6">
<div class="ml-3 relative">
<!-- Teams Dropdown -->
<Dropdown v-if="$page.props.jetstream.hasTeamFeatures" align="right" width="60">
<template #trigger>
<span class="inline-flex rounded-md">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition">
{{ $page.props.user.current_team.name }}
<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
</svg>
</button>
</span>
</template>
<template #content>
<div class="w-60">
<!-- Team Management -->
<template v-if="$page.props.jetstream.hasTeamFeatures">
<div class="block px-4 py-2 text-xs text-gray-400">
Manage Team
</div>
<!-- Team Settings -->
<DropdownLink :href="route('teams.show', $page.props.user.current_team)">
Team Settings
</DropdownLink>
<DropdownLink v-if="$page.props.jetstream.canCreateTeams" :href="route('teams.create')">
Create New Team
</DropdownLink>
<div class="border-t border-gray-100" />
<!-- Team Switcher -->
<div class="block px-4 py-2 text-xs text-gray-400">
Switch Teams
</div>
<template v-for="team in $page.props.user.all_teams" :key="team.id">
<form #submit.prevent="switchToTeam(team)">
<DropdownLink as="button">
<div class="flex items-center">
<svg v-if="team.id == $page.props.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>{{ team.name }}</div>
</div>
</DropdownLink>
</form>
</template>
</template>
</div>
</template>
</Dropdown>
</div>
<!-- Settings Dropdown -->
<div class="ml-3 relative">
<Dropdown align="right" width="48">
<template #trigger>
<button v-if="$page.props.jetstream.managesProfilePhotos" class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition">
<img class="h-8 w-8 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name">
</button>
<span v-else class="inline-flex rounded-md">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition">
{{ $page.props.user.name }}
<svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</button>
</span>
</template>
<template #content>
<!-- Account Management -->
<div class="block px-4 py-2 text-xs text-gray-400">
Manage Account
</div>
<DropdownLink :href="route('profile.show')">
Profile
</DropdownLink>
<DropdownLink v-if="$page.props.jetstream.hasApiFeatures" :href="route('api-tokens.index')">
API Tokens
</DropdownLink>
<div class="border-t border-gray-100" />
<!-- Authentication -->
<form #submit.prevent="logout">
<DropdownLink as="button">
Log Out
</DropdownLink>
</form>
</template>
</Dropdown>
</div>
</div>
<!-- Hamburger -->
<div class="-mr-2 flex items-center sm:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition" #click="showingNavigationDropdown = ! showingNavigationDropdown">
<svg
class="h-6 w-6"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
>
<path
:class="{'hidden': showingNavigationDropdown, 'inline-flex': ! showingNavigationDropdown }"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
<path
:class="{'hidden': ! showingNavigationDropdown, 'inline-flex': showingNavigationDropdown }"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
</div>
<!-- Responsive Navigation Menu -->
<div :class="{'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown}" class="sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</ResponsiveNavLink>
</div>
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200">
<div class="flex items-center px-4">
<div v-if="$page.props.jetstream.managesProfilePhotos" class="shrink-0 mr-3">
<img class="h-10 w-10 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name">
</div>
<div>
<div class="font-medium text-base text-gray-800">
{{ $page.props.user.name }}
</div>
<div class="font-medium text-sm text-gray-500">
{{ $page.props.user.email }}
</div>
</div>
</div>
<div class="mt-3 space-y-1">
<ResponsiveNavLink :href="route('profile.show')" :active="route().current('profile.show')">
Profile
</ResponsiveNavLink>
<ResponsiveNavLink v-if="$page.props.jetstream.hasApiFeatures" :href="route('api-tokens.index')" :active="route().current('api-tokens.index')">
API Tokens
</ResponsiveNavLink>
<!-- Authentication -->
<form method="POST" #submit.prevent="logout">
<ResponsiveNavLink as="button">
Log Out
</ResponsiveNavLink>
</form>
<!-- Team Management -->
<template v-if="$page.props.jetstream.hasTeamFeatures">
<div class="border-t border-gray-200" />
<div class="block px-4 py-2 text-xs text-gray-400">
Manage Team
</div>
<!-- Team Settings -->
<ResponsiveNavLink :href="route('teams.show', $page.props.user.current_team)" :active="route().current('teams.show')">
Team Settings
</ResponsiveNavLink>
<ResponsiveNavLink v-if="$page.props.jetstream.canCreateTeams" :href="route('teams.create')" :active="route().current('teams.create')">
Create New Team
</ResponsiveNavLink>
<div class="border-t border-gray-200" />
<!-- Team Switcher -->
<div class="block px-4 py-2 text-xs text-gray-400">
Switch Teams
</div>
<template v-for="team in $page.props.user.all_teams" :key="team.id">
<form #submit.prevent="switchToTeam(team)">
<ResponsiveNavLink as="button">
<div class="flex items-center">
<svg v-if="team.id == $page.props.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>{{ team.name }}</div>
</div>
</ResponsiveNavLink>
</form>
</template>
</template>
</div>
</div>
</div>
</nav>
<!-- Page Heading -->
<header v-if="$slots.header" class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<slot name="header" />
</div>
</header>
<!-- Page Content -->
<main>
<slot />
</main>
</div>
</div>
</template>
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
this code app layout i need side bar
i'm making a markdown file in which is present an SVG.
Inside this SVG i wanna include an image, but it doesn't work.
Whenever i remove the image, it works fine.
You got any idea? Thank you so much in advance!
This is the svg code:
<svg fill="none" viewBox="0 0 508 125" width="800" height="200" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
<div class="dialogue-card" id="dialogue-box">
<image xlink:href="https://github.com/Goth-Rei-Codes/goth-rei-codes/blob/main/Images/propic.png" />
<div class="propic-container">
<div class="name-container">
<div class="dialogue-text">
<p>Welcome to my profile!</p>
</div>
<div class="arrow-down" id="next-dialogue"></div>
</div>
</div>
</div>
</div>
</foreignObject></svg>
I want display the video blob. How can I process for the src?
<div class="jumbotron col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3" th:each="film: ${films}">
<p th:text="${film.description}" />
<p th:text="${film.genre}" />
<p th:text="${film.nomFilm}" />
<p th:text="${film.titre}"/> <video src="${film.filmvideo}"></video>
</div>
<video width="400" controls>
<source th:src="${film.filmvideo}" />
</video>
I'm quite new to coding and I have a question. I have checked out several forums already, but none of them helped me out.
I have a image gallery (I used this one to get started: http://startbootstrap.com/thumbnail-gallery) and I want to get a popup with the image on full size when a viewer clicks on one of the thumbnails. Does anyone know how I can implent this function?
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="">
<meta name="description" content="">
<title></title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300' rel='stylesheet'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- HEADER -->
<div class="top-header section-content align-center">
<header>
<img class="logo" src="images/logo.png">
<ul class="inline">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
<!-- CONTENT -->
<section>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/2.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/1.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/3.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/5.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/4.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/6.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/8.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/7.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/1.png" class="grayscale" alt="Portfolio Item 1">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/4.png" class="grayscale" alt="Portfolio Item 2">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/3.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/portfolio-items/6.png" class="grayscale" alt="Portfolio Item 3">
</a>
</div>
</div>
</div>
</section>
<hr />
<!-- QUOTE AREA -->
<section>
<div class="quote-container section-content align-center">
<h2 class="interested">Interested?</h2>
<p>Do you like my work? Do you want more information about me and the services I provide? Feel free to shoot me a message!</p>
Contact
</div>
</section>
<!-- FOOTER -->
<div id="footer">
<div class="copyright">
© Copyright 2014 Distinction Portfolio Theme.
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You can use LightBox for this. It is not included in the bootstrap framework but i'm sure there are extensions made for it.
For example, you can try Bootstrap 3 lightbox : http://ashleydw.github.io/lightbox/
Use this HTML code to implement simple image pop up on click of thumbnail and have an image close option:
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-toggle="modal" data-target=".bs-example1-modal-lg">
<img class="img-responsive" src="img/clinic1.jpg" alt="">
</a>
<div class="modal fade bs-example1-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- /.modal-dialog -->
<div class="modal-content">
<!-- /.modal-content -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myLargeModalLabel">Image-1</h4>
</div>
<div class="modal-body">
<img src="img/clinic1.jpg" class="img-responsive img-rounded center-block" alt="">
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
I want two 'menus' on my page, but when I add a div next to my leftmenu (where I didn't use div but pictures) I get ugly space between my pictures.
My current code is:
<html>
<head>
<title>Welcome to Nielyboyken</title>
</head>
<body bgcolor="grey">
<br>
<a href="http://zeldauniverse.net">
<img src="http://i1.minus.com/jbg3tjE57KYsx1.png" />
</a>
<a href="">
<img src="http://i.minus.com/ip2vEndNDv7vj.png" />
</a><text-align:"right">
<iframe src="http://free.timeanddate.com/clock/i3qoeq8q/n48/szw135/szh135/hoc000/hbw12/hfc000/cf100/hgr0/hcw1/fas20/facfff/fdi88/mqc0033cd/mqs3/mql5/mqw2/mqd74/mhc0033cd/mhs4/mhl4/mhw2/mhd76/mmcf90/mml4/mmw1/mmd74/hhc666/hmc666" frameborder="0" width="137" height="137"></iframe>
</font>
<div style="width:1340px; height:20px; background-color:black;">
Contact
[Register]
[Login]</font>
</div>
<center>
<font style="font-family: Fixedsys;font-size: 35px;color:blue">Welcome to my personal site!</font>
</center>
<center><font style="font-family:Fixedsys,;color:white">Welcome! Notice that this is not a forum site but just a personal site.</font></center>
<div id="LeftMenu">
<table>
<img src="http://i5.minus.com/iI7VEHhLP3WyV.png" /> <br>
<a target="_blank" href="http://minus.com/lJMgzKG1FFv2v">
<img src="http://i.minus.com/jJMgzKG1FFv2v.png" border="0"/>
</a>
<div style="width:50px; height:50px; color:red;" </div> <br>
<a href="http://zeldauniverse.net">
<img src="http://i.minus.com/ibfBWr7hEsMtsT.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://youtube.com">
<img src="http://i.minus.com/ib0OadHbWfnpew.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://twitter.com">
<img src="http://i.minus.com/iMNcGJ5Bjwvx4.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://facebook.com">
<img src="http://i.minus.com/ibhDDFKmGlL4rk.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<img src="http://i4.minus.com/i6nJ7Pg8kUfqo.png" /> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="page2test.html" >
<img src="http://i.minus.com/iFNcJv4UvSdye.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="aboutzu.html">
<img src="http://i.minus.com/ishbphpEbNRi2.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://twitter.com/nielyboyken">
<img src="http://i.minus.com/ihJnSHKv3vAco.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="http://www.zeldauniverse.net/forums/members/5390370-nielyboyken.html">
<img src="http://i.minus.com/ibdZgDlK1H5NLP.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" /> <br>
<a href="youtube.com/nielyboyken">
<img src="http://i.minus.com/iGZahFuxuc349.png" />
</a> <br>
<img src="http://i.minus.com/iJMgzKG1FFv2v.png" />
</table>
</div>
</body>
</html>
Does someone know how to fix it?
You should use CSS. HTML is going to leave white space unless you explicitely define where you want them in your DIVs. Much easier to use a CSS template, and format with that. You will have ability to "stick" things in place with CSS.
http://www.w3schools.com/css/
OR
You could use a 1x 2 table. and then insert each element inside the table. Then they would be side by side. Define Column properties, etc...
You should really Google the formatting of this stuff before you ask on here...