Image map area changed upon using plugin - javascript

So I'm using this image map plugin so that the area is fixed to the image even when I resize the window or zoom in.
I want to make my codes that when you click, it'll call the specified function. So far it works (function is called) but for some reason when I add this implementation code to my <script>, it alters the area to a smaller size. When I remove it, the area goes back to the original size.
$(function () {
ImageMap('img[usemap]');
//check for plugin implement
alert("ImageMap plugin enabled");
});
I'd just remove the above code because apparently the area doesn't resize when I resize my window, but this is just a sample code to test. What's weirder is that when I use the template for my actual codes (just the same codes but the image and text content changed), my image map doesn't even work.
Here's the full code (the changes are on the third picture on the right):
$(function () {
ImageMap('img[usemap]');
//check for plugin implement
alert("ImageMap plugin enabled");
});
function selectASC() {
alert("Hello");
}
body {
background-color: #CFFFE7;
overflow: hidden;
}
#master {
display: table;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 30px 70px 60px 70px;
height: 100%;
}
p {
font-weight: bold;
font-size: 20px;
font-size: 2vw;
font-family: sans-serif;
}
#diagrams {
background-color: lightblue;
text-align: center;
}
.logo-image {
vertical-align: middle;
display: table-cell;
}
.logo-image img {
max-width: 90%;
max-height: 90%;
}
<div id="master" class="container">
<p>This is a very long sentence. This is a very long sentence. This is a very long sentence.</p>
<p>
This is a very long sentence.
<br/> This is a very long sentence.</p>
<div id="diagrams" class="container">
<div class="wrapper clearfix">
<div class="logo-image">
<img id="ssc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img id="msc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img id="asc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image" usemap="#image-map"/>
<map name="image-map">
<area coords="0,0,338,338" alt="" shape="rect" title="test" href="#" onclick="selectASC()">
</map>
</div>
</div>
</div>
</div>
The outcomes of both my example code and actual code are different, and I'm certain my html/css codes don't affect the results since they're the same but just different image and text content.

Related

How can i change the width of the image from the nth class using a script?

<div class="curbaT">
<img src="avertizare/1.png" class="img" >
<p class="p1">Curba la stanga </p>
</div>
.img{
left: 10px;
height: 100px;
width: 120px;
margin-top: auto;
margin-bottom: auto;
position: absolute;
}
I have several such divs (multiple classes "curbaT") and I want the image of the 2th, 6th, 7th, 15th and 22th div to be 150 wide.
I don't know javascript, just html and css, but this is what i would like to do using a script. From what I understood, you can select anything and change the respective characteristics. Thx!
Use the :nth-child(n) selector. Reference here.
.curbaT:nth-child(1) img,
.curbaT:nth-child(3) img {
width: 150px;
height: 30px;
}
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>

scrolling lightbox gallery

I have a scrolling a gallery that looks like this, I need to add an option that on click on one of the pictures, the clicked picture will cover 100% height and width of the screen, and the scrollbar will still appear under the picture in order to move to the next or the previous pictures that also will be in size of 100% of the screen.
It should look like this.
This is the gallery that on the first example:
$('.imageWrapper img').click(function() {
$('.scrolls img').css({
'width': '100%',
'height': '100%'
});
$('.footerclass').css({
'display': 'none'
});
});
.wrapper {
margin: auto;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.scrolls img {
width: 275px;
cursor: pointer;
display:inline-block;
display:inline;
margin-right: -5px;
vertical-align:top;
}
.imageWrapper {
display: inline-block;
position: relative;
margin-bottom: 120px;
}
.imageWrapper img {
display: block;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper" id="column">
<div class="scrolls">
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<div class="imageWrapper">
<img src="images/01.jpg" />
Link
</div>
<?php include 'footer.php';?>
</div>
</div>
</body>
I tried to add a JS that will change the size of all pictures to 100% height and width on click on one the picture. You could see that in the snippet.
My problem is how to display the specific picture that the user clicked on in 100% and still to have an option to scroll to previous or next pictures.
If you want to display the specific picture that the user clicked then I would suggest using $(this).css() selector instead of $(.scrolls img).css() to point more accurately to the image you're looking to render 100%.

Jquery slide panel moves adjacent picture down

I'm using Jquery slide panels for some images. The problem I'm having is when the slide panel shows it moves the image next to it down. I do not want this to happen. Is there a way to show the slider panel but not move the image next to it? There are questions similar to this but there are no answers to them on the site.
Here's the jsfiddle without the image files:
https://jsfiddle.net/amyspod/q2obknwt/
Here's my code:
<div class="images">
<div class="image1">
<img class="myImg" id="heroimage" src="heros website.jpg" alt="www.heros.com" width="300" height="200">
<div class="panel" id="hero">PSD to responsive website</div>
</div>
<div class="image2">
<img class="myImg" id="oakimage" src="oak website.jpg" alt="www.oak.com" width="300" height="200">
<div class="panel" id="oak">PSD to responsive website 2</div>
</div>
</div>
.myImg {
border-radius: 5px;
cursor: pointer;
display: inline-block;
margin-top: 40px;
}
/*slider panels*/
.image1, .image2{
display:inline-block;
margin-left: 10%;
}
.panel {
padding: 10px;
text-align: center;
background-color: white;
font-size: 20px;
display: none;
}
$(document).ready(function(){
function slidepanel(x,y){
$(x).mouseenter(function(){
$(y).slideToggle("slow");
});
$(x).mouseleave(function(){
$(y).slideToggle("slow");
});
}
slidepanel("#oakimage", "#oak");
slidepanel("#heroimage", "#hero");
});
Inline (or inline-block) elements align to the baseline. Try this:
.image1,
.image2 {
...
vertical-align: top;
}
Demo
Also note that CSS classes, by design, are intended to be reusable. I see no reason to have two of them in this case, and they should have semantic values that describe their use or function.

view enlarged image ontop of content on mouseover with javascript

I am trying to use javascript to show a larger version of my image on mouseover. I have the functionality working however the display property is not right and I need the image to be shown ontop of the page content i.e like a popout.
How an I add this to my code. The problem I have is that my page is divided into columns so the image is restricted by the width of the column so I need a way to override that i.e. use a popout.
DEMO - js fiddle
html:
<div class="column1">
<div class="enlarge">
<img id="test" src="example.jpg" onmouseover="bigImg(this)" onmouseout="normalImg(this)" width="400" height="300" class="img-responsive" alt="image">
<div id="test1" class="test1" style="display:none;">
<img width="800" src="example.jpg" alt="" />
</div>
</div>
</div>
<div class="column2">
A LOT OF TEXT IN HERE
</div>
javascript:
function bigImg() {
$("#test1").show();
}
function normalImg() {
$("#test1").hide();
}
It would be restrictive to code your script using specific elements (IDs). Would advice you to use element classes instead.
You can achieve what you want several ways, here is one using absolute positioning for the big image:
$('.small-image').on('mouseenter', function(e) {
$(this).siblings('.big-image').show();
}).on('mouseleave', function(e) {
$(this).siblings('.big-image').hide();
})
body {
overflow-x: hidden;
}
.row::after {
content: ' ';
display: block;
clear: both;
}
.column {
float: left;
}
.column1 {
width: 20%;
}
.column2 {
width: 80%;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.enlarge {
position: relative;
}
.big-image {
display: none;
position: absolute;
left: 100%;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="column column1">
<div class="enlarge">
<img src="http://lorempixel.com/400/300/" class="small-image" alt="image">
<div class="big-image">
<img src="http://lorempixel.com/400/300/" alt="" />
</div>
</div>
</div>
<div class="column column2">
A LOT OF TEXT IN HERE
</div>
</div>
Also on Fiddle.
Try putting the img tag outside of the column1 div and then it will no longer be restricted.
If the img is not showing ontop of the text try add css value z-index.
img {
z-index:2;
}
use :
$("#test" ).hover(function() {
$("#test1").show();
},function(){
$("#test1").hide();
});
https://jsfiddle.net/2rt836co/4/

T-shirt image hover (based on different colors)

So ive seen some jquery hover effects, but none that can do the multiple choices hover.
Basically i have 5 t-shirt color choices, that when each one is hovered over, it should pop up where the current (green t-shirt) is located.
Heres link - http://musclefire.com/26.php
Note: there will also be other t-shirt styles on this page as well, so not sure if this will be too much code/complex for this to work properly.
p.s. - whoever nails it and gets perfect code, i'll send out a free tee to ya!
thanks much!
I'm pretty sure this is what you're looking for:
Demo: http://plnkr.co/edit/jiNxcw9nHQD5gV4vvwlj?p=preview
HTML
<div id="main">
<img class="active" src="http://musclefire.com/gear/muskull-green.png" />
<img src="http://musclefire.com/gear/muskull-red.png" />
<img src="http://musclefire.com/gear/muskull-blue.png" />
<img src="http://musclefire.com/gear/muskull-charcoal.png" />
<img src="http://musclefire.com/gear/muskull-yellow.png" />
</div>
<div id="thumbs">
<img src="http://musclefire.com/gear/muskull-green.png" />
<img src="http://musclefire.com/gear/muskull-red.png" />
<img src="http://musclefire.com/gear/muskull-blue.png" />
<img src="http://musclefire.com/gear/muskull-charcoal.png" />
<img src="http://musclefire.com/gear/muskull-yellow.png" />
</div>
CSS
#main {
border: solid 1px #eee;
text-align: center;
}
#thumbs {
border: solid 1px #eee;
text-align: center;
}
#main img {
width: 300px;
display: none;
}
#main img.active {
display: inline-block;
}
#thumbs img {
width: 50px;
height: auto;
}
jQuery
$(function(){
$('#thumbs img').bind('hover', function(){
var which = $(this).attr('src');
$("#main img:visible").hide();
$('#main img[src="' + which +'"]').stop().fadeIn(800);
});
});
All I know you cannot do this with css. So you should use javascript or jquery for this.
The only way to do this with CSS is if the element to affect is either a descendent or an adjacent sibling.
For example:
.parent:hover .child{}
.child{}
<div class="parent">
<div class="child"></div>
</div>
You can do what you wanted with jquery,
Live demo : http://jsfiddle.net/XUM8R/

Categories