HTML
<div module="product_listnormal">
<ul>
<li>
<input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}">
<div id="prdImgWrapper">
<img src="{$image_medium}" alt="" class="prdImgImg"/>
</div>
.....
So i Add onmouseover in img tag
<img src="{$image_medium}" onmouseover="this.src={$image_medium} + 'aaa'" alt="" class="prdImgImg"/>
but it doesn't call {$image_medium}aaa link what's wrong?
ex) if $image_medium = 111.png
$image_medium + aaa = 111aaa.png
I use on mouse over and on mouse leave function like this
onmouseover='this.src = this.src.replace(".jpg","_2.jpg")' onmouseleave='this.src = this.src.replate("_2.jpg", ".jpg")'
this source can use every picture
You have two links image_medium and image_medium2.
Say image_medium="a.jpg" and image_medium_2="a_2.jpg";
Using pure JavaScript
1) You can add listener for the same using mouseenter and mouseleave events if you know values
var divToBeHovered=document.getElementById("prdImgWrapper");
//add listener
divToBeHovered.addEventListener("mouseenter",function(){
var imgEle=document.querySelector("#"+this.id+" img");
imgEle.src="a_2.jpg"; //image_medium_2
},false);
divToBeHovered.addEventListener("mouseleave",function(){
var imgEle=document.querySelector("#"+this.id+" img");
imgEle.src="a.jpg"; //image_medium
},false);
2)If you don't know values i.e src of image is dynamic then you can create one function and call it both on mouseenter and mouseleave event.
<a href="/product/detail.html{$param}" class="prdImg">
<img src="{$image_medium}"
onmouseenter="changeURLOfImage(this,'{$image_medium}aaa')"
onmouseleave="changeURLOfImage(this,'{$image_medium}')"
mouseralt="" class="prdImgImg"/></a>
function changeURLOfImage(imageElem,url){
imageElem.src="url"
}
3)Assign direct values to src
<img onmouseenter='this.src ={$image_medium}aaa' onmouseleave='this.src ={$image_medium}'/>
This can be done using pure CSS by using two images and changing the display on hover state.
a.prdImg > img {
display: inline-block;
}
a.prdImg > img + img {
display: none;
}
a.prdImg:hover > img {
display: none;
}
a.prdImg:hover > img + img {
display: inline-block;
}
<div module="product_listnormal">
<ul>
<li>
<input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}">
<div id="prdImgWrapper">
<img src="http://media-cache-ak0.pinimg.com/736x/65/7e/a2/657ea254eb522135fbd59e0656a2e1dd.jpg" alt="" class="prdImgImg"/><img src="http://baconmockup.com/400/300" alt="" class="prdImgImg"/>
</div>
.....
By the way; wouldn't cause this.src={$image_medium} + 'aaa' the src to change from 111.png to 111.pngaaa?
While changing image src is not possible with css you can have 2 images(one hidden) and a container and on container mouse hover hide first image and show the second image.
something like this:
Html:
<div>
<span>This could be an image</span>
<span>This could be an image</span>
</div>
CSS:
div{
float:left;
width:200px;
height:200px;
}
div span{
width:100%;
height:100%;
display:none;
background-color:red;
}
div span:first-child{
display:block;
background-color:lime;
}
div:hover span:first-child{
display:none;
}
div:hover span:nth-child(2){
display:block;
}
have a look:
http://jsfiddle.net/mzvaan/fs6mc952/
html code like
<img src="sample1.png" id="newimg">
script like this
$(document).ready(function(e) {
$("#newimg").hover(function() {
$("#newimg").attr('src', 'sample2.png');
})
});
Related
I want to display my text after my thumbnail slider div something like this,
my active slider class: "itm0 selected"
my thumbnail id: "thumbs"
i want to display text below my #thumbs div automatically when it is active
i tried this CSS, but not worked,
.itm0 .selected{
#thumbs::after{
content:"first active image";
}
}
.itm2 .selected{
#thumbs::after{
content:"second active image";
}
}
html:
<div id="thumbs">
<img class="itm0 selected"></img>
<img class="itm1"></img>
</div>
when 2nd img active in slider
<div id="thumbs">
<img class="itm0"></img>
<img class="itm1 selected"></img>
</div>
etc.
anyone have some solution?
or how can I do it in javascript?
I am new newbie.. give some idea friends
If you're open to using jQuery, you can do the following.
Fiddle: https://jsfiddle.net/79fryyz1/
HTML
I've added an additional div under the #thumbs div. I've given it a class called caption. This will be used to show the text under the div. Then, I've added a data attribute called data-caption to store the text to be displayed after each image. I've also added a toggle button for demonstration purposes.
<div id="thumbs">
<img class="itm0 selected" src="http://bit.ly/1S6znnc" data-caption="first active image"/>
<img class="itm1" src="http://bit.ly/1MKyvBI" data-caption="second active image"/>
</div>
<div class="caption">first active image</div>
Toggle
JS
When the image slider is changed, and a new image is selected, you can pick up the caption from the data attribute and display it under the #thumbs div.
$('.toggleBtn').click(function() {
$('img').toggleClass('selected');
var caption = $('img.selected').data('caption');
$('.caption').html(caption);
});
That's a strange way of doing it, but here's how it could work...
.thumbs {
width:100px;
height:100px;
float:left;
margin:10px;
background:green;
}
.thumbs:after {
content: ' ';
position:absolute;
background:#000;
color:#fff;
border-radius:5px;margin:100px 0 0;
}
.thumbs:nth-child(1):hover:after {
content:"first thumb";
}
.thumbs:nth-child(2):hover:after {
content:"second thumb";
}
<div class="thumbs"></div>
<div class="thumbs"></div>
Does anybody knows how can I add some bootstrap icons to my textarea. Icons should show on focus and hide on focus out. This textarea is similary, if not the same as Facebook Add new status textarea.
All I was able to do is to expand and shrink textarea onfocus/focusout events, using JavaScript.
This is the code I have:
HTML:
<div class="jumbotron" style="height:150px">
<div class="col-lg-12">
<textarea class="expand" rows="3" cols="20"></textarea>
</div>
</div>
JS:
<script type="text/javascript">
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
});
$('textarea.expand').focusout(function () {
$(this).animate({ height: "2em" }, 500);
});
</script>
CSS:
.expand
{
height: 2em;
width: 50%;
}
I've also try using .css in JS and trying to add icon, but I suppose I don't do this right way, cause nothing gets shown.
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
$(this).css('glyphicon glyphicon-camera');
});
Textarea should behave like this:
OnFocusOut:
OnFocus:
Can someone help me, and give me an idea on how to do this...Because I'm pretty bad in JS.
One Simple answer can be creating a sibling div element to the textarea which will contain all the icons, show the div of focusing the textarea and hide it on focusout of the textarea
This example is using the selector
.parent:hover .links{}
but could be edited to
.parent:focus .links{}
if desired. However, to show you this in action, i've designed a simple demo below:
.parent{
height:100px;
width:70%;
background:red;
position:relative;
}
.parent:hover .links{
display:block;
}
.links{
display:none;
position:absolute;
bottom:0;
}
<div class="parent">
<div class="child">
<div class="links">
facebook twitter etc
<img src="http://placekitten.com/g/20/20" alt="" />
</div>
</div>
</div>
An example using Sibling selectors
Here is a working example of using the sibling selector
input:focus + .items
which selects the class .items of which has a sibling of 'input' which has a focus (i.e. what you're looking for)
#parent{
height:100px;
width:80%;
background:red;
position:relative;
}
.items{
bottom:0;
padding:5px;
display:none;
}
input:focus + .items{
display:block;
}
<div id="parent">
<input type="text" placeholder="enter text"/>
<div class="items">
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
</div>
</div>
I have 3 <a> tags in my html and they each contain 2 images. Only the grescale images are displayed and the other ones are set to none.
I want to hide the greyscale image when I hover the mouse over the grescale image and display the colored one. And when I un-hover I want the colored image to be hidden again. How can I do that using jquery?
<a class="mylink" href="">
<img src="img/thumbnails/colored-1.jpg" class="color-image"/>
<img src="img/thumbnails/greyscale-1.jpg" class="greyscale-image"/>
</a>
<a class="mylink" href="">
<img src="img/thumbnails/colored-2.jpg" class="color-image"/>
<img src="img/thumbnails/greyscale-2.jpg" class="greyscale-image"/>
</a>
<a class="mylink" href="">
<img src="img/thumbnails/colored-3.jpg" class="color-image"/>
<img src="img/thumbnails/greyscale-3.jpg" class="greyscale-image"/>
</a>
.color-image
{
display:none
}
Why use jQuery and not pure CSS?
You can use :hover and toggle the display of the images.
a.mylink:hover .color-image,
a.mylink .greyscale-image {
display: inline;
}
a.mylink .color-image,
a.mylink:hover .greyscale-image {
display: none;
}
In jQuery it is just
function swap(evt) {
var isOver = evt.type === "mouseenter";
link.find(".color-image").toggle(isOver);
link.find(".greyscale-image").toggle(!isOver);
}
$("a.mylink").hover(swap, swap);
NO Jquery needed. Use the :hover css pseudo on the .myLink anchor, like:
.color-image {
display:none;
}
a.myLink:hover .color-image {
display: block;
}
a.myLink:hover .greyscale-image {
display: none;
}
My way :p
a[class="mylink"]:not(:hover) img[class*="greyscale"],
a[class="mylink"]:hover img[class*="color"] {
display: inline-block;
}
a[class="mylink"]:not(:hover) img[class*="color"],
a[class="mylink"]:hover img[class*="greyscale"] {
display: none;
}
Here is a demo JSFiddle
http://jsfiddle.net/agaex70r/
Here is another JSFiddle with a transition.
http://jsfiddle.net/agaex70r/2/
You could do this with css:hover. Hover on gray scale image, display:none and the reverse for the colored image. This has the benefit of working when JS is disabled. Otherwise, you could look into Jquery UI
Here is the exact thing i've got to do:
Appropriate JavaScript and html so that when the user moves the mouse
over a thumbnail image of one particular type of room that is on
special offer, a full size (larger) image relating to it is displayed
(note that the display of a larger image should not cause other page
elements to move). When the user moves the mouse away from the
thumbnail image, the larger image should disappear.
Here is my website.
I just want to be able to hover over those image and get them to appear above the page, without altering how the page looks now.
This is my javascript section at the moment;
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
But i'm unsure if that is right or now for what i want,
Then this is the html;
<img src="images/garden2.jpg" width="201" height="143" alt="Garden Room" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')"/>
<div id="div1"><img src="images/garden2.jpg" alt="Garden Room" /></div>
but that creates a div below the image and alters the my elements which is not what i want to happen.
If you want some element to appear over other elements this element need to be positioned - the best way in your case is to set all containers element - meaning elements that contains the original shown image and the hidden image - in style position relative - and the hidden image set absolute position and when you hover on the original image just show the hidden image as your coded already:
I made a simple jsfiddle for you to understand
html:
<div class="container">
<img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')" />
<div id="div1" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" /></div>
<div>
<div class="container">
<img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')" />
<div id="div2" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" /></div>
<div>
css:
.container{
position: relative;
}
.container .hid-img{
position: absolute;
display:none;
z-index:1;
}
js:
var div = {
show: function(elem) {
document.getElementById(elem).style.display = 'block';
},
hide: function(elem) {
document.getElementById(elem).style.display = 'none';
}
}
EDIT:
just add width,height to img tag http://jsfiddle.net/MKPgv/2/
I would use a simpler code like this:
HTML:
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
</a>
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
</a>
CSS:
a {
position: relative;
display: inline-block;
}
a .fullsize {
position: absolute;
top: 100%;
left: 0;
display: none;
z-index: 1;
}
a:hover .fullsize {
display: inline;
}
JS:
-NONE-
Fiddle: http://jsfiddle.net/84anu/
Preview http://jsfiddle.net/84anu/show/
How can I make if click .a(bluearea) then .menu fadein,
but click .apic(apic is inside a) run fancybox and menu not fadein?
http://jsfiddle.net/e5Tdv/12/
jQuery
$('.apic').fancybox({});
$('.a').not('.apic').click(function(){
$('.menu').fadeIn();
});
HTML
<div class="a">
<a class="apic" rel="gallery" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>
</a>
</div>
<div class="menu">menu</div>
CSS
.menu{
display: none;
}
.a{
background: blue;
}
You can check where user clicked (event target) and fade when not clicked on image, for example:
$('.apic').fancybox({});
$('.a').click(function(e){
$('.menu').hide(); // This is just to see that it works
if ($(e.target).is('div')) {
$('.menu').fadeIn();
}
})
See in action - http://jsfiddle.net/Qeay5/