I am trying to get it so when the mouse moves over the div it fades the image inside
function clickimage($imageid){
$("#image_"+imageid).hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.6);
});
}
<div id='images_$imageid'>
<a href='?tg=photos&photo=$imageid' onmouseover=\"javascript:clickimage('$imageid')\">
<img src='users/$ptgid/images/$iimg' width='100' height='100'/>
</a>
</div>
You would want to set the binding when the document loads, not every time the mouse hovers over the image. Also, I would create a class so that you can initialize the hover on each item
$(document).ready(function() {
$(".image-hover-class").hover(function(){
$(this).find('img').fadeTo("slow", 1.0);
},function(){
$(this).find('img').fadeTo("slow", 0.6);
});
});
For the link, you would do something like this:
<a class="image-hover-class" href="?tg=photos&photo=$imageid" \>
<img src='users/$ptgid/images/$iimg' width='100' height='100'/>
</a>
If you want to do the hover on the div, you could do this instead (but I recommend doing the hover on the <a> tag):
$(document).ready(function() {
$(".image-hover-class").hover(function(){
$(this).find('a img').fadeTo("slow", 1.0);
},function(){
$(this).find('a img').fadeTo("slow", 0.6);
});
});
For the div, you would do something like this:
<div class="image-hover-class">
<a href="?tg=photos&photo=$imageid" \>
<img src='users/$ptgid/images/$iimg' width='100' height='100'/>
</a>
</div>
i dont see in the image element id attribute.
when you do it
$("#image_"+imageid)
its try to find this id,
add
id=image_".$imageid." to img
This can be done just using css. I wrote a tutorial here:
http://www.ozzu.com/html-tutorials/tutorial-creating-hover-effect-elements-using-css-t97597.html
Just include your orignal image and a "faded" image.
Related
I have two images, what I want to happen is that when I hover on the image, the image will change to the second image, and then when I hover on the image again, the image will change to the first image.
How do I do that using JavaScript?
This is a Javascript solution. I highly suggest you look into Jquery once you understand the below. In your case you don't seems to need the onmouseout.
HTML
<img src="urImg.png" onmouseover="chgImg(this)" onmouseout="normalImg(this)">
Javascript
function chgImg(x) {
x.src = "newImg.png";
}
function normalImg(x) {
x.src = "urImg.png";
}
HTML
<div class="image_container">
<img src="foo.png" class="first"/>
<img src="bar.png" class="last"/>
</div>
jQuery
$(".image_container").hover(function(){
$(this).toggleClass("switch");
});
CSS
.image_container .last{display:none;}
.image_container.switch .last{display:block;}
.image_container.switch .first{display:none;}
You can do this!
<a href="#" id="name">
<img title="Hello" src="images/view2.jpg>
</a>
$('#name img').hover(function() {
$(this).attr('src', 'images/view1.jpg');
}, function() {
$(this).attr('src', 'images/view2.jpg');
});
For anyone who do not want to use Javascript, just HTML, CSS.
You just need create second image with position: absolute; and put it with original image into a div (with position: relative;)
After that, you can use CSS to control opacity of second image when you hover it.
Below is my sample code using TailwindCSS
<div className="relative">
<img
src="/image1.png"
className="w-[100px] h-[100px]"/>
<img
src="/image1.png"
className="w-[100px] h-[100px] absolute opacity-[0] hover:opacity-[1]"/>
</div>
I have a series of pictures with a class of .player__headshot and right now it's fading out the image that's being moused over as opposed to the other 59 images in the series.
<div class="player player--goalie">
<div class="player__headshot player--elder">
<div class="picked is-active">
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>
</div>
$(".player__headshot").on("mouseover", function(){
$(this).css("opacity", 0.25);
});
$(".player__headshot").on("mouseout", function(){
$(this).css("opacity", 1);
});
To fix this you can select all the .player__headshot elements and exclude the current one using not(), before fading them all back on mouseleave.
Also note that you can achieve this more effectively using hover(); it's shorter and uses mouseenter and mouseleave events instead:
$(".player__headshot").hover(function(){
$(".player__headshot").not(this).css("opacity", 0.25);
}, function() {
$(".player__headshot").css("opacity", 1);
});
The code below will fade out everything that has the class player_headshot
$(".player__headshot").on("mouseover", function(){
$(".player_headshot").css("opacity", 0.25);
});
If you want to keep the image you've moused over active, then you will need to change the class on that image to prevent it from being affected.
If you are using JQuery, perhaps remove the class from the selected image on mouseover or something like that.
I've been attempting to create an effect where a user clicks on an image, that image is replaced by another image which also acts as a link.
However my problem is that whenever I click the replaced image, the link doesn't work.
Fiddle: http://jsfiddle.net/ha6qp7w4/321/
$('.btnClick').on('click',function(){
$(this).attr('src','https://placekitten.com/g/200/300')
$(this).attr('href','google.com')
});
img tags don't have href properties. You need to wrap the image in an anchor and assign the url to that, or do a custom redirect.
Notice your image html on inspection of element:
<img src="https://placekitten.com/g/200/300" id="1" class="btnClick" href="google.com"> <!-- not valid! -->
This isn't valid because imgs aren't anchors!
function first() {
this.src = 'https://placekitten.com/g/200/300';
$(this).unbind("click");
$(this).on("click", second);
}
function second() {
window.location.href = "https://www.google.com";
$(this).unbind("click");
$(this).on("click", first);
}
$('.btnClick').on('click', first);
(I tried to make a fiddle but it wouldn't save, but this should work)
You need to store your actions in functions so you can revert if need be. First action is the change the source, then change the event to redirect you like a link.
here is an example.
example
html part
<img src="http://i.imgur.com/o46X87d.png" data-new="http://i.imgur.com/9lf2Mjk.png" id="1" class="btnClick" />
add data-new attribute on image with new url of image
and replace it with js
$('.btnClick').on('click',function(){
var url = $(this).attr("data-new");
$(this).attr("src", url);
});
I would use a totally different approach, but here's how to do that with the code you already have:
<div class="btnClick">
<img src="http://i.imgur.com/o46X87d.png" id="1" />
<a href="javascript:check()" id="2" style="display:none;">
<img src="http://i.imgur.com/9lf2Mjk.png" id="static" />
</a>
</div>
<script type="text/javascript">
$('.btnClick').on('click',function(){
if($('#1').is(':visible')) {
$('#1').hide();
$('#2').show();
} else {
$('#1').show();
$('#2').hide();
}
});
</script>
I purposely didn't use toggle() to better show the technique, in case you'd want to turn the click event off when the clicking image appears etc.
I'm currently working on a new personal portfolio site using very basic html/css/jquery code. I'm trying to build my own gallery to display my work (instead of using an already existing one like lightbox) but I've run into an annoying issue: I've tried to make the "forward-button" display the immediate following div but instead it fades in all the following divs. Here's my (condensed) code:
HTML:
<!--navigation buttons for gallery-->
<a id="back-button"><img src="image.png" /></a>
<a id="forward-button"><img src="image.png"/></a>
<!--gallery begins here-->
<div id="gallery">
<div id="first-div" class="work-display">
<img src="images/albumust-display.png" class="work-image" />
<div class="caption" id="wd1c">
<p class="caption-text">caption</p>
</div>
</div>
<div id="second-div" class="work-display">
<img src="images/ce-display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
<div id="third-div" class="work-display">
<img src="images/display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
CSS (all divs inside gallery are hidden by default):
.work-display {
display:none;
position:absolute;
}
What I'm trying to do with Jquery is that everytime someone opens a thumbnail, give the corresponding div that displays the image on full size a "true" state of "active" and then fade in, like this:
$( "#thumb-1" ).click(function(){
$( "#first-div" ).prop("active",true);
$( "#first-div" ).fadeIn();
});
all divs originally have a state of "active" = false:
$( "#gallery" ).children("div").prop("active",false);
then this is what I've tried to do with the "forward-button":
$("#forward-button").click(function () {
$("#gallery").find( $("div").prop("active",true) )
.prop("active",false)
.fadeOut()
.next().fadeIn();
$(".caption").fadeIn();
});
But then what it does is that instead of fading in only the next div, it fades all the divs that come after. what am I doing wrong?
I'm very new to Javascript/Jquery so probably this isn't the smartest way to go about this, if you have a simpler solution, do tell me.
I couldn't test it properly, because I don't have the whole code (and the images either). But this should do the trick:
$(function () {
$("#gallery div").attr("active", false);
$("#thumb-1").click(function () {
$("#first-div").attr("active", true).fadeIn();
});
$("#forward-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.next()
.attr("active", true)
.fadeIn();
});
$("#back-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.prev()
.attr("active", true)
.fadeIn();
});
});
Kind of demo: http://jsfiddle.net/W8VLh/13/
Just in case you have a reason to use 'active' properties instead of classes:
$("#forward-button").click(function () {
$("#gallery").find( "div[active='true']")
.prop("active",false)
.fadeOut()
.next().fadeIn().prop("active",true);
$(".caption").fadeIn();
});
I'm trying to change two (preview) div elements with mouseover on a button-image with a link.
One of the preview-divs will show an image, which I would like to have linked to a specific site
The button-image also has a mouseover function class in CSS.
I might add that there will be multiple images to use this function, each spaced with an own div and a class, which i believe isn't semantically correct as it should be when using an usorted list (but that i will worry about later)
Also I'd like to add I'm new to scripting but eager to learn.
On mouseout or click is not important, the current (preview) contents may remain as on last mouseover.
Currently the changing of the preview divs content works by adding document.getElementById to the anchor and the img separately to each button as stated in the following messy code , but i am looking for a cleaner approach like something with javascript or jquery and using vars and making the preview image clickable and linked to the previewed site
[EDIT:]This code DOES work for making the preview image a link[/EDIT]
It would be really great if i could load each preview image and text from an external file
<div class="btn">
<a href="http://www.previewed_site.com" target="_blank"
onmouseover="document.getElementById('preview_text_content')
.innerHTML = 'a short preview description here';">
<img onmouseover="document.getElementById('preview_img_content')
.innerHTML = '<a href=\'http://www.previewed_site.com\'>
<img src=\'preview.jpg\' /></a>';" src="btn.png" width="100px"
height="40px" alt="mysite.com" />
</a>
</div>
The CSS for the btn mouseover (which works like i want but added here for reference):
.btn {
position relative;
overflow: hidden;
z-index: 1;
top: 5px;
width: 100px;
height:40px;
}
.btn a {
display:block;
width:100px;
height:40px;
z-index: 100;
}
.btn a:hover {
background: url(btn_hover.png);
}
Some words of advice or some links to example codes would be greatly appreciated
here you go..using jquery...
HTML
<div class="btn">
<a href="http://www.previewed_site.com" target="_blank" >
<img src="btn.png" width="100px" height="40px" alt="mysite.com" />
</a>
</div>
with jquery, you can use mouseover function on a selected element..jquery documentation for selector is here
JQUERY
$(document).ready(function(){ //recommened you to use script inside document.ready always
$(".btn a").mouseover(function(){ //selecting element with "<a>" tag inside an element of class "btn"
$('#preview_text_content') .html('a short preview description here'); //getting an element with an id "preview_text_content" and repalcing its html with jquery html() ;
})
$(".btn img").mouseover(function(){
$('#preview_img_content').html('<a href=\'http://www.previewed_site.com\'><img src=\'preview.jpg\' /></a>'); //similar as above
});
});
UPDATED
dynamic loading image n text...using data attribute
HTML
//first image
<a href="http://www.previewed_site.com" target="_blank" data-text_content="a short preview description here">
<img src="btn.png" width="100px" height="40px" alt="mysite.com" data-img_content="preview.jpg"/>
</a>
//second image
<a href="http://www.previewed_site.com" target="_blank" data-text_content="a short preview description here 2">
<img src="btn.png" width="100px" height="40px" alt="mysite.com" data-img_content="preview2.jpg"/>
</a>
JQUERY
$(document).ready(function(){
$(".btn a").mouseover(function(){
$('#preview_text_content') .html($(this).data('text_content'));
})
$(".btn img").mouseover(function(){
var imgContent='<a href=\'http://www.previewed_site.com\'><img src=\''+$(this).data('img_content') +'\' /></a>';
$('#preview_img_content').html(imgContent);
});
});
OR
you can always use functions to clear your codes and making it understandable..
HTML
<div class="btn">
<a href="http://www.previewed_site.com" target="_blank" onmouseover="linkMouseoverFunction()">
<img onmouseover="imgMouseoverFunction()" src="btn.png" width="100px" height="40px" alt="mysite.com" />
JAVASCRIPT
function linkMouseoverFunction()
{
document.getElementById('preview_text_content').innerHTML = 'a short preview description here';
}
function imgMouseoverFunction()
{
document.getElementById('preview_img_content').innerHTML = '<a href=\'http://www.previewed_site.com\'><img src=\'preview.jpg\' /></a>';
}