Taking a web design course, and need to use strictly Javascript on this project.
Basically I want to have a series of thumbnails on the left of the screen, and when one is hovered over it brings up information about the image on the right side of the screen. It remains that way until another thumbnail is hovered over, then the information is replaced.
I thought of having a series of divs on-top of eachother containing the information, and onhover the targeted div appears and the last div disappears.
Any suggestions?
Give the images a mouseover attribute and run a function on hover.
<img onmouseover="changeInfo(0)">
<img onmouseover="changeInfo(1)">
<img onmouseover="changeInfo(2)">
<div id="showInfo"></div>
Then place the info for every image in an array and change the inner html in the div depending on which image is being hovered.
function changeInfo(index){
var texts = ['Info on img0','Info on img1','Info on img2'];
var info = document.getElementById('showInfo');
info.innerHTML = texts[index];
}
I don't know if this is the result you want to get. First, I declare all the images using divs. The information is hidden at the beginning.
<div id="posts">
<div id="post1">
<img src="[Insert an image]" width="100" height="100"/>
<p class="hide"> information about picture one </p>
</div>
<div id="post2">
<img src="[Insert an image]" width="100" height="100"/>
<p class="hide"> information about picture one </p>
</div>
<div id="post3">
<img src="[Insert an image]" width="100" height="100"/>
<p class="hide"> information about picture one </p>
</div>
</div>
these are the css classes
.nolabel p {display: none;}
.label p { display: block; }
.hide { display: none; }
and javascript:
var posts = document.getElementById("posts").children;
function forEach(el, callback) {
for(var i = 0; i <= el.length; i++) {
callback(posts[i]);
}
}
forEach(posts, function(child) {
child.addEventListener("mouseover", function(){
forEach(posts, function(el) {
if(child.id === el.id)
el.className = "label";
else
el.className = "nolabel";
});
});
});
the forEach helps us to simplify a this code a little.
Since we could have any number of images I thought it was not a good
idea to reference each of them by its id.
When the cursor hovers over one of the images we trigger a mouseover event which will compare the ids. The if statement makes sure we only modify the element we clicked and the others remain with the nolabel class (or replace it if they had label).
I hope that helps.
jQuery would be best for this, or you can use an onMouseOver function and your information styled with visibility: hidden. Maybe post some code so more help can be provided.
Check this out too Display text on MouseOver for image in html
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>
Could you help me with this one please?
If you click on my hosting http://www.gosu.cz and select first image from top|left then it's gonna expand on top of the page with a additional info.
Header
Description
link
Now I need to set hidden value for each image which is defined as:
<li class="item col-xs-12 col-sm-6 col-md-4">
<a href="http://placehold.it/857x712" data-caption="description">
<img src="http://placehold.it/857x712" class="img-responsive" alt="alt" />
</a>
</li>
and when is selected then it's gonna show up at this div which is right below header:
<a href="LINK+KEYWORD">
<div class="least-preview"></div>
</a>
Any ideas how could I do that please? My poor skills in programing includes some basic of html, php but not scripting.
This is how it looks like: http://imgur.com/a/CU30N
Cheers,
Martin
So as David Arce suggested it might be done through alt value.
What I have done is using script at the start and also creating link for search queue:
<script>
$(document).ready(function() {
$('img').click(function () {
var alt = $(this).attr("alt")
var strLink = "link&Key=" + alt;
document.getElementById("link").setAttribute("href",strLink);
});
});
</script>
Thanks to document.ElementById... I was able to set a href value via id to generated link.
<a id="link">
<div class="least-preview"></div>
</a>
I think you can use an tag like this inside the li tag
<input type="hidden" name="Image_details" value="Additional details offf that image">
And then on img onclick="getDetails();"
in js:
function getDetails()
{
div.innerHTML = document.getElementById("Img_details").value;
}
//The code is conceptual, so the idea is to assign the hidden input value to the when an image is clicked or selected
I am not quite sure what you are trying to hide, or what you want your code to do. If you want something to be hidden or visible you can use the visibility property in the css for the element you want to hide.
/* Hides h2 element */
h2 {
visibility: hidden;
}
/* Shows h2 element (default value)*/
h2 {
visibility: visible;
}
Here is the reference here...
http://www.w3schools.com/cssref/pr_class_visibility.asp
In enlightenment to what the question is, you can have an onClick="function()" attribute to your image which will grab whichever value, id, class, etc you have in your new which can be put into a search query by variable. All can be done through a function.
$(document).ready(function() {
$('img').click(function () {
var alt = $(this).attr("alt")
var strLink = "link&Key=" + alt;
document.getElementById("link").setAttribute("href",strLink);
});
});
On http://www.socialstudent.co.uk/stackoverflow/ I am trying to work out a way to make it so when you tap an image on mobile, it makes text appear below it and a button. Then if you tap it again it disappears.
I have tried the usual ways in JS but none seem to work. Any ideas on how I can get that to happen would be great!
An example would be this - http://jsfiddle.net/ZECTP/ but with the image being tapped on mobile.
JS off jsfiddle as was required:
$(function () {
var div = $('#showOrHideDiv');
$('#action').click(function () {
div.fadeToggle(1000);
});
});
HTML off jsfiddle as was required:
<a id="action" href="#">hide/show text</a>
<div id="showOrHideDiv" style="display: none;">hidden text</div>
It needs to be in addition to the text which is on the image, as below text and a button needs to appear.
Thanks!
I checked the source code of the site you provided and you would need to add this code to get the desired effect. I'm assuming you want to show/hide the text over each image.
var elems = $('#my_horizontal_main_stage li');
elems.find('div').hide(); // text hidden by default, or you can use css
elems.on('click', function(e){
el = $(this);
el.find('div').fadeToggle('fast');
})
Check this udpated fiddle
I think this is what you are looking for.
HTML
<figure class = "figure">
<img src = "http://icons.iconarchive.com/icons/dapino/summer-holiday/96/photo-icon.png" />
<figcaption class = "figcaption">
SOME TEXT HERE
</figcaption>
</figure>
CSS
figure {
font-size: 100%;
}
figcaption {
display: none;
}
jQuery
$(document).ready(function(){
$(".figure").click(function(){
$(".figcaption").toggle();
});
});
In my Web application i am changing style of HTML Element using javascript.
See be below code,
function layout() {
if(document.getElementById('sh1').getAttribute('src') == "abc.png") {
document.getElementById("sh1").style.display="none";
} else {
document.getElementById("sh1").style.display="block";
}
}
and HTML is :
<img id="sh1" src="abc.png" />
Now i want that if img elements style is display:none; then below Elements
<p id="Text1">Name<br />description</p>
style should also get changed to display:none; and if img elements style is display:block; then above Elements style should also get changed to display:block; automatically.
how this can get achieved?
Add the other element in your function too. Something like this:
function layout(){
if(document.getElementById('sh1').getAttribute('src') == "abc.png"){
document.getElementById("sh1").style.display="none";
document.getElementById("Text1").style.display="none";
} else {
document.getElementById("sh1").style.display="block";
document.getElementById("Text1").style.display="Block";
}
}
or if you put both in a container you can do one operation on the whole container =)
If i've understood you correctly then your after this
function layout(){
if(document.getElementById('sh1').getAttribute('src') == "abc.png"){
document.getElementById("sh1").style.display="none";
document.getElementById("Text1").style.display = "none"; //Hide the description
} else {
document.getElementById("sh1").style.display="block";
document.getElementById("Text1").style.display="block"; //Show the description
}
}
If this function is unique to this image and desciption then this should work nicely, obviously if there are a whole bunch of images that you are applying this logic to then there is a much more efficient way of achieving this with a generic function.
I would recommend just using jQuery and changing the markup to wrap your image and text together. Check out the link to a working example too.
<figure id="sh1" class="picture active">
<img src="http://placehold.it/100x100&text=abc.png" />
<figcaption><span class="name">ABC</span><span class="desc">This is a description</span>
</figcaption>
</figure>
<figure id="sh2" class="picture">
<img src="http://placehold.it/100x100&text=xyz.png" />
<figcaption><span class="name">XYZ</span><span class="desc">This is a description</span>
</figcaption>
</figure>
http://jsfiddle.net/Qvb4U/1/
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>';
}