Making Click function of image map appear in specific Div - javascript

So I have an image map called map and I want the text to show up within my div #show_message. The image map is on the left and the text will appear on the right side. I believe the only problem that I'm facing right now is integrating the show_message div into the script below. Also how do I hide the text before it appears on click? I thought the .()hide would do it but it doesn't work. Please help!
This is my div
<style>
#show_message {
float: right;
width: 500px;
height: 750px;
position: relative;
padding:20px;
margin:20px;
background:#fff;
color:#000
},
map {
float: left;
}
</style>
This is my map
<img src="{{ 'image.jpg' | asset_url }}" alt="" usemap="#map" id="" />
<map id="map" name="map">
<area alt="" item="abc" href="#" shape="rect" coords="33,110,395,217" />
<area alt="" item="efg" href="#" shape="rect" coords="35,222,395,321" />
<div id="show_message">Click to see text.</div>
<div id="abc show_message" class="display">You clicked abc!</div>
<div id="def show_message" class="display">You clicked def!</div>
</body></html>
This is the script
<script type="text/javascript">
$('[item]').click(function() {
var item=$(this).attr('item');
$(".display").hide();
$("#"+item).show();
return false;
});
</script>


To hide the text you have to do something like this
<div id="abc show_message" class="display">You clicked abc! <input type="button" id="hide" name="hide" value="Hide" /></div>
And the function hide in your js is:
$('#hide').click(function(){
$(".display").hide();
});

Related

top menu's position fixed but on scroll part from next div disappears

The div class="first" is a top menu that I wanna try to make it fix on scroll
so I used this code, everything is working fine but the problem is that when I start scrolling half of the next image mid-top.jpeg
in the next div class="second" disappear.
it is like image mid-top.jpeg comes under the image top.jpeg
How can I fix this?
thanks!
var fixmeTop = $('.first').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('.first').css({
position: 'fixed',
top: '0',
});
} else {
$('.first').css({
position: 'static'
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first">
<img src="images/top.jpeg" alt="">
<map name="">
<area target="" alt="" title="home" href="index.html" coords="1,60,95,115" shape="rect">
</map>
</div>
<div class="second">
<img src="images/mid-top.jpeg" alt=""> <!--problem here-->
<map name="">
<area shape="" coords="" href="" alt="">
</map>
</div>

You can solve this with CSS only.
Set .first to position: fixed
Vertically offset .second by the height of .first using margin-top
.first {
height: 150px;
position: fixed;
top: 0;
}
.second {
margin-top: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first">
<img src="https://via.placeholder.com/350x150">
<map name="">
<area target="" alt="" title="home" href="index.html" coords="1,60,95,115" shape="rect">
</map>
</div>
<div class="second">
<img src="https://via.placeholder.com/350x150">
<map name="">
<area shape="" coords="" href="" alt="">
</map>
</div>

Is img top.jpeg suppose to be part of the fixed menu? If not, it should be moved out of the .first div. That could explain why your second image is moving under the first.

how to avoid maps tag mapping to hyperlink and calling an onclick function instaed html php js

I am trying to make a 4-buttoned image to work as 4 buttons mapped to 4 different functions instead of default hyperlinks (href=#).
What I wish is that the user data is added edited deleted or updated within this PHP page instead of explicit hyperlinks to different pages.
Even if I have to resort to other pages, this data needs to be submitted via functions of the post or get etc or some own function. But the issue is that after mapping this image as 4 different buttons and even removing the href and adding onclick=myfunction(), it does nothing and if I add href, it doesn't go to myfunction after clicking and takes to href link instead.
please help.
<html>
<head>
<title>Panel
</title>
<?php
require('connect.php'); //working connection
$queryU = "SELECT username FROM `user`";
$listU = $connection->query($queryU);
if ($listU->num_rows > 0) {
while ($rowu = $listU->fetch_assoc()) {
$y = $rowu['username']; //working script
}
}
?>
<style>
body {
background-image : url("main.jpg");
opacity : 40%;
font-family : AlphaMaleModern;
text-align : center;
color : #fff;
font-size : 26px;
}
.a {
height : 90%; width : 45%;
}
.img {
margin-top : 20%;
position : relative;
}
.list {
float : right;
position : absolute;
border : lime solid;
width : 50%;
z-index : -1;
position : static;
top : 10%;
height : 90%;
}
#userlist {
width : 100%;
opacity : 0.8;
font-family : AlphaMaleModern;
text-align : center;
font-size : 28px;
height : 100%;
}
.img:hover, #userlist:hover {
opacity : 1;
}
</style>
<script>
//test function 1 for on click call but not working
document.getElementById('aa').on(click, function (e) {
e.preventDefault();
alert("CLICKED");
}
);
//test function 2 for on click call but not working
function printr(ss) {
var x = document.getElementById('ss').name;
alert(x);
switch (x) {
case "aa":
alert("AA");
break;
case "b":
alert("B");
break;
case "c":
alert("C");
break;
case "d":
alert("D");
break;
}
</script>
</head>
<body>
<fieldset name="Users" class="a" style="float:right;">
<legend>USERS
</legend>
<div id="user" class="user" style="">
<img src="panel/panel.png" class="img" alt="" usemap="#Map1"/>
<map name="Map1" id="Map1">
<area alt="" title="" href="#" id="aa" onclick="printr(aa)"
shape="poly" coords="200,8,16,10,104,108"/>
<area alt="" title="" href="#" id="b" onclick="printr(b)"
shape="poly" coords="205,14,108,109,204,197"/>
<area alt="" title="" href="#" id="c" onclick="printr(c)"
shape="poly" coords="8,201,98,110,8,15"/>
<area alt="" title="" href="#" id="d" onclick="printr(d)"
shape="poly" coords="104,113,16,208,204,207"/>
</map>
<div class="list">
<select id="userlist" size="20">
<option>
<?php echo $y; ?>
</option>
<!--list of users from mysql database (working good)-->
</select>
</div>
</fieldset>
</div>
</body>
</html>
image:

I'll answer in few steps.
Firstly – your html block comment in 98 line is wrong.
It is:
<!--list of users from mysql database (working good) --!>
but is should looks like that:
<!--list of users from mysql database (working good) -->
Because of that wrong comment closing (which isn't close) – every line under that comment was commented too.
Your function printr(ss) isn't closed. Last } is closing of switch.
You've onclick="printr(aa)" instead of onclick="printr('aa')". Without ' brackets you're giving function argument nonexistent variable aa. With brackets you're giving just string.
My version of code:
<html>
<head>
<title>Panel
</title>
<style>
body{
background-image: url("main.jpg");
opacity:40%;
font-family: AlphaMaleModern;
text-align:center;
color:#fff;
font-size: 26px;
}
.a{
height:90%;
width:45%;
}
.img{
margin-top:20%;
position:relative;
}
.list{
float:right;
position:absolute;
border:lime solid;
width:50%;
z-index:-1;
position:static;
top:10%;
height:90%;
}
#userlist{
width:100%;
opacity: 0.8;
font-family:AlphaMaleModern;
text-align:center;
font-size:28px;
height:100%;
}
.img:hover,#userlist:hover{
opacity: 1;
}
</style>
<script>
function printr(ss)
{
switch (ss)
{
case "aa":
alert("AA");
break;
case "b":
alert("B");
break;
case "c":
alert("C");
break;
case "d":
alert("D");
break;
}
}
</script>
</head>
<body>
<fieldset name="Users" class="a" style="float:right;">
<legend>USERS
</legend>
<div id="user" class="user" style="">
<img src="https://i.stack.imgur.com/7A0Ky.png" class="img" alt="" usemap="#Map1" />
<map name="Map1" id="Map1">
<area alt="" title="" href="#" id="aa" onclick="printr('aa')" shape="poly" coords="200,8,16,10,104,108" />
<area alt="" title="" href="#" id="b" onclick="printr('b')" shape="poly" coords="205,14,108,109,204,197" />
<area alt="" title="" href="#" id="c" onclick="printr('c')" shape="poly" coords="8,201,98,110,8,15" />
<area alt="" title="" href="#" id="d" onclick="printr('d')" shape="poly" coords="104,113,16,208,204,207" />
</map>
<div class="list" >
<select id="userlist" size="20">
<option>
</option>
<!--list of users from mysql database (working good) -->
</select>
</div>
</fieldset>
</div>
</body>
</html>
https://jsfiddle.net/9ks9kxzw/
That's not as clear code as it could be, but it's working now.
By the way – I've removed php sections etc. to not disturb myself. I hope you understand what have I done. Remember that if you have error in javascript – it'll just don't execute.

mouseover map region to display image and mouseout to hide

I've an Europe map. When i mouse-over Italy region, i wish to display the map image and disappear when mouse-out. However, i cant make it works perfectly.
Below is the HTML
function show(id) {
document.getElementById(id).style.display = "block";
}
function hide(id) {
document.getElementById(id).style.display = "none";
}
section {
width: 1000px;
position: relative;
margin: 0 auto;
}
#map01 {
position: absolute;
left: 334px;
top: 562px;
display: none;
}
<img id="map01" src="images/italy.png" />
<img src="images/map.jpg" width="1000" height="816" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="poly" onMouseOver="show('map01')" onMouseOut="hide('map01')" coords="339,597,334,598,338,604,335,613,345,617,346,622,353,622,357,615,366,612,378,618,382,622,387,636,394,647,406,657,421,670,427,676,438,676,441,679,450,684,456,689,457,695,467,696,472,701,475,712,478,719,474,725,474,737,478,737,486,726,486,716,492,715,491,709,485,703,480,698,484,689,489,684,496,689,503,688,504,694,510,695,509,688,502,682,490,676,482,672,472,670,468,665,473,662,460,659,449,658,441,648,438,640,432,630,422,622,416,615,410,606,414,599,410,592,419,589,428,586,428,577,428,572,415,570,411,563,402,561,393,565,386,566,385,575,376,573,369,581,366,585,361,579,357,574,353,584,344,584,338,584,340,595" href="#" />
</map>
Here's my code
http://codepen.io/w3nta1/pen/JWrmaz

Changed the answer.
After tinkering a bit I realized that the problem is that the image overlays the map. The solution was to move the use map on to the italy image and switch to opacity instead of display.
the code became a follows:
Please note that I eyeballed the area approximately.
function show(id) {
document.getElementById(id).style.opacity = 1;
}
function hide(id) {
document.getElementById(id).style.opacity = 0;
}
#map01 { position: absolute; left:342px; top:569px; opacity:0; }
<map name="Map" id="Map">
<area onMouseOver="show('map01')" onMouseOut="hide('map01')" alt="" title="" href="#" shape="poly" coords="56,78,65,87,74,94,82,97,93,105,100,111,131,134,140,143,143,161,136,170,120,174,99,175,88,177,92,188,127,199,132,194,133,181,149,174,156,154,158,148,150,138,151,126,174,135,176,126,140,108,138,101,101,77,82,54,77,32,98,24,94,8,74,0,66,0,54,7,39,12,32,22,25,12,19,20,7,22,7,31,2,37,6,46,4,54,13,63,30,50,47,56,39,115,32,118,21,123,26,139,27,159,38,156,42,128,40,120,50,65,47,58,48,60" />
</map>
<img id="map01" src="https://image.ibb.co/bYLutv/italy.png" usemap="#Map"/>
<img src="https://image.ibb.co/hEbZtv/map.jpg" width="1000" height="816" border="0"/>

This seems to fix the issue.
I took the listeners out of the html and put them into your javascript area. I also used onmouseenter and onmouseexit instead of onmousein and onmouseout though I'm not totally sure this was a necesary change.

Here is a working version : https://codepen.io/jonathanmarotta/pen/poarREK
(credits to Bango in his previous answer ...)
document.getElementById('poly').onmouseleave = function() {
hide('map01');
};
(Note : to generate the area(s) you need in your image, you can use any map generator like this online one for example : https://www.image-map.net/)

Hover and Click image to reveal content (With initial content displayed)

I'm trying to figure out how to get the following to work:
When initially loaded, content on the right for the initial image is displayed (and should be coloured).
On hover over the images, the images will change to colour and the content for that image will appear on the right hand side.
On Click the content will stay in the right hand side and the image will stay coloured as it is the selected content.
I understand you could just make the images simply have a rollover feature using CSS for the coloured images to appear, however I am unaware how to make the image stay coloured when clicked and how to make the content in the right appear, which I assume would be possible to do using Jquery or Javascript.
What it looks like:
http://i.stack.imgur.com/73oFL.png
<ul id="testb">
<li id="companies">
<img src="images/linkedin.gif" width="120" height="95" alt="" />
<img src="images/specsavers.gif" width="100" height="95" alt="" />
<img src="images/avc.gif" width="110" height="95" alt="" />
</li>
<li id="testcont">content here</li></ul>
#testb{
width:950px;
margin:0 auto;
list-style:none;
padding:0;
}
#companies{
width:440px;
float:left;
list-style:none;
padding:85px 0 45px 0;
margin:0;
height:130px;
display:block;
}
#testcont{
float:left;
width:395px;
height:170px;
padding:45px 0 45px 70px;
margin:0;
background: url(images/testglow.gif) no-repeat;
}
If you could help out it would be really appreciated.
Thanks

Even tho NewToJS is absolutely right, sometimes a little free source code might help you get started:
var contentValues = ["slide 1 content", "slide 2 content", "slide 3 content"];
var contentColors = ["#333333", "#777777", "#000000"];
$(function() {
$("#companies img").on("mouseover", function()
{
console.log($(this).data("slide"));
$("#testcont").html(contentValues[$(this).data("slide")]);
$("#testcont").css("background-color",contentColors[$(this).data("slide")]);
});
$("#companies img").on("click", function()
{
console.log($(this).data("slide"));
$("#companies img").css("background-color", "transparent")
$(this).css("background-color", contentColors[$(this).data("slide")]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="testb">
<li id="companies">
<img data-slide="0" src="images/linkedin.gif" width="120" height="95" alt="" />
<img data-slide="1" src="images/specsavers.gif" width="100" height="95" alt="" />
<img data-slide="2" src="images/avc.gif" width="110" height="95" alt="" />
</li>
<li id="testcont">content here</li>
</ul>

Cannot display multiple instances of Java/CSS image gallery on single HTML page

JavaScript - I am aware that this is where I need to add something to enable multiple instances to run, however I really have no idea of how to code this correctly.
<script type="text/javascript" src="kuttinew/jquery-1.10.2.js"></script>
<script>
$('#images_thumbnails a').click(function () {
var newImageSrc = $(this).attr('href');
$('#images_full img').attr({
'src': newImageSrc
});
return false;
});
</script>
CSS - This was simple enough
#images_full img,
#images_thumbnails img {
padding: 3px;
border: 1px solid #CCC;
}
#images_thumbnails img {
margin: 4px;
width: 40px;
height: 40px;
}
HTML - Finally the HTML elements
<div id="images_full">
<img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>
<div id="images_thumbnails">
<a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set03.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set03.jpg" />
</a>
</div>
It works perfectly fine until I add a second instance on same HTML page, the second set just open in own window like they have almost by-passed the Java commands.

I'm going to take a stab in the dark and say that your problem is that you are just using ids (#) instead of classes (.) to represent your multiple photo galleries. If you want similar behavior among multiple "instances," your jQuery script should be acting upon a class instead of an id. For example:
http://jsbin.com/otiTOyU/1/edit?html,css,js,output
Script:
<script type="text/javascript" src="kuttinew/jquery-1.10.2.js"></script>
<script>
$('.images_thumbnails a').click(function () {
var newImageSrc = $(this).attr('href');
// Traverse the DOM to change this's respective '.images_full img'
$(this).parent().prev().children().first().attr('src', newImageSrc);
return false;
});
</script>
CSS:
.images_full img,
.images_thumbnails img {
padding: 3px;
border: 1px solid #CCC;
}
.images_thumbnails img {
margin: 4px;
width: 40px;
height: 40px;
}
HTML:
<div id="gallery1">
<div class="images_full">
<img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>
<div class="images_thumbnails">
<a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
</a>
</div>
</div>
<div id="gallery2">
<div class="images_full">
<img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>
<div class="images_thumbnails">
<a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
</a>
<a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
<img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
</a>
</div>
</div>
There are different ways you could go about optimizing the code. However, I'll leave that to you as an exercise. Be sure to check out the link I gave near the beginning of my post for a live demo.

Categories

Resources