Image appear when hover the text (html bootstrap) - javascript

I'm coding my website with bootstrap (to make it responsive, and it's easier to update for me) and I'd like image to display when I over a text.
here's the code:
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>
I would like the ihp_poster01.JPG image to appear when I hover "INSTITUT HENRI POINCARRE, POSTER — 2017". I've tried multiple things which didn't worked because the img and the text are not in the same <div>.
I guess I'll have to use Javascript, but I didn't found any JS for that :/
Can someone help me?
thanks

You can use mouseenter & mouseleave events (using JavaScript of course) on text and toggle the display style of image accordingly...
window.onload = function() {
var name = document.getElementById("name");
var image = document.getElementById("img");
name.addEventListener("mouseenter", function( event ) {
image.style.display = "block";
});
name.addEventListener("mouseleave", function( event ) {
image.style.display = "none";
});
}
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img style="display:none;" id="img" src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>
Update: To make this dynamic and handle different text with different images one can use onmouseenter & onmouseleave with common JS function, have a look at the snippet below:
function toggleShow(elementId) {
let el = document.getElementById(elementId);
el.style.display = "block";
}
function toggleHide(elementId) {
let el = document.getElementById(elementId);
el.style.display = "none";
}
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img style="display:none;" id="image1" src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>
<div class="row">
<div class="col-sm-8" style="font-size: 24pt">
INSTITUT HENRI POINCARRE, POSTER — 2017
</div>
<div class="col">
<img style="display:none;" id="image2" src="image/ihp_poster01.JPG" class="img-fluid" alt="Responsive image">
</div>
</div>

Related

Javascript - Inserting Image Text and description in a container

<div id="CollectionALL">
<div id="collection1" class="col">
<img id="Img1" class="imageCS"/>
<H1 id="Title1"></H1>
<p id="Text1"></p>
</div>
<div id="collection2" class="col">
<img id="Img2" class="imageCS"/>
<H1 id="Title2"></H1>
<p id="Text2"></p>
</div>
</div>
Hi all,
I'm just starting out on javascript and would like to check how i should go about replacing or inserting an image into each of the Img1, Img2 and Img3 tags.
I believe once i'm able to figure out the image, the title and texts should be in the same method?
function displayResult()
{
var collect1=document.getElementById("img1").rows[0];
var x=collect1.insertCell(-1);
x.innerHTML="<img src='img/abc.png' alt='collection1'/>";
}
You need to specify the selectors for h1, p, img inner your container. then you can use setAttribute and innerHTML function to set content.
Then you can wrapped inside a loop and iterate the result array. The example below will shows you how it works inside the loop.
like that
function displayResult()
{
var collect = document.getElementById("collection1");
let img = collect.querySelector('img');
let h1 = collect.querySelector('h1');
let p = collect.querySelector('p');
img.setAttribute('src', "https://via.placeholder.com/100");
h1.innerHTML = "collection1";
p.innerHTML = "some text"
}
displayResult()
<div id="CollectionALL">
<div id="collection1" class="col">
<img id="Img1" class="imageCS"/>
<H1 id="Title1"></H1>
<p id="Text1"></p>
</div>
<div id="collection2" class="col">
<img id="Img2" class="imageCS"/>
<H1 id="Title2"></H1>
<p id="Text2"></p>
</div>
</div>
I'm unsure if I understood your question correctly, but if I did I see no use for JS to be used in here. Simply insert your src, title and text through the HTML.
<div id="CollectionALL">
<div id="collection1" class="col">
<img id="Img1" class="imageCS" src="img/abc.png">
<h1 id="Title1">My Title</h1>
<p id="Text1">My Text</p>
</div>
<div id="collection2" class="col">
<img id="Img2" class="imageCS" src="img/abc.png>
<h1 id="Title2">My Title</h1>
<p id="Text2">My Text</p>
</div>
</div>
note that "img" is not a tag with a closing, thus ending it with a />:
<img id="Img2" class="imageCS"/>
is not quite right. Also, tags in HTML are case-sensitive, and so "H1" is not a valid tag, but "h1" is.
var ImgA= document.getElementById("Img1");
Img1.src = "abc.jpg";
var TitleA= document.getElementById("Title1");
TitleA.textContent = "Some Title Header Thing";
var TextA= document.getElementById("Text1");
TextA.textContent = "qwerty some text";
I think i'll be doing it this way.
Seems to work
Thanks to everyone

in angular 5 how to make splash screen till the child component load all images?

I'm using angular 5 for displaying pages that have a lot of images with high res, and it takes too long to load.
What I want to do is to make a splash screen, a div that will cover the full screen, and after all the images finish loading it will disappear.
How and where do I implement this in angular 5?
window.onload = someFunction; // is not working well
page.component.html:
<div id="page" class="page">
<div id="splash"></div>
<div id="home-page">
<div class="container d-none d-lg-block">
<img src="assets/images/home/line_with_bird.png" alt="">
<div class="row">
<div class="col-3 ad-paper">
<img src="assets/images/home/paper.png" class="" alt="">
</div>
<div class="col-2">
<img id="arrow-word" src="assets/images/arrow_word.png" alt="">
<img id="ladder" src="assets/images/ladderLong.png" alt="">
</div>
<div class="col-6 offset-1 c2">
<div id="window"></div>
<div class="smicos">
<app-socialmedia style="width: 641px;"></app-socialmedia>
</div>
</div>
</div>
</div>
</div>
page.component.ts
ngOnInit() {
function splash() {
console.log('tttttttttttttttttttttttttttttttttttttttttt');
document.getElementById('splash').style.display = 'none';
document.getElementById('window').classList.add('window-animation');
}
window.onload = splash;
}
Do not hide your splash screen on ngOnInit. Instead do this:
Keep count of images you are showing in controller.
totalImages = 20;
Keep a load handler on each image;
<img (load)='checkAllLoaded()'>
In checkAllLoaded function, check if all images are loaded:
checkAllLoaded() {
this.totalImages = this.totalImages - 1;
if(this.totalImages === 0) {
document.getElementById('splash').style.display = 'none';
document.getElementById('window').classList.add('window-animation');
}
}
Set a div with *ngIf on a property which will turn to true only when the image is loaded.
<div class="splash" *ngIf="!loaded"></div>
<img [src]="img" (load)='loaded=true'>
DEMO

JS- How to change image on Mouseout

I have an banner with mouse over effects here:
As you can see the mouseover effects are working perfectly however I don't know how to make a mouse out animation. Here are its current codes:
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
HTML:
DIV id=base>
<DIV id=mapcontainer>
<A href="javascript:warp()">
<IMG border=0 name=targetimage src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif">
</A>
</DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1>
<A onmouseover=changeimage(2,this.href) href="index.html">8CCC REQUESTS/TALKBACK</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(1,this.href) href="index.html">Alice Springs 8952 7771</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(0,this.href) href="index.html">Tenant Creek 8952 7182</A>
</DIV>
<DIV class=textboxinner3>
<SPAN class=t3nonelink>...other contact details <A onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV>
</DIV>
</DIV>
<div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Hope you could help me achieve the mouseout effect.
I recommend using either 'onmouseout="changeimage(2,this.href)"' (in the same place as the mouseover property. Or use a jQuery handler, which is more complex for your needs really.

I have 2 js functions and one is canceling out the other

I looked through the FAQ but couldn't figure out what was causing this (in js). I'm trying to get something live soon and I'm bypassing better animation for the time being, possibly also AJAX.
What I'm going is bringing two external php pages a includes to the current page, one is a gallery slider and the other is where the gallery imagery will appear. Here is a link to the page I'm currently testing so you can see:
http://www.chrisjohndesigns.com/artwork-conventions.php
So the code I've used has been simple replacement .innerHTML calls where the left and right arrows call the next gallery div and then the thumbnails within that gallery call the artwork that appears below. The left and right arrows work just fine but as soon as any of the thumbnails are clicked (and they do work properly) the left and right arrows stop working and you're stuck on whatever frame you chose from.
Here is the code from the conventions page:
<div id="field">
<div id="gallery-callout">
<div class="thumbs-slider-field-container" id="generic-slider">
<div class="thumbs-slider-field" >
<div id="prev">
<img src="images/gallery-scroll-left.png" width="42" height="120" />
</div>
<div id="thumbs-slider">
<img src="images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
<img src="images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
<img src="images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/>
<img src="images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
<img src="images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/>
</div>
<div id="next">
<img src="images/gallery-scroll-left.png" width="42" height="120" onclick="callSlider('conventions2')" />
</div>
</div>
</div>
</div>
<div class="rule">
</div>
<div class="entry" style="margin-bottom:0px;">
<h4 style="color:#ffffff; margin:0px;">| artwork > conventions</h4>
</div>
<div class="gallery-frame" id="generic">
<h1 style="margin-top:5px; margin-bottom:10px;">CONVENTION ARTWORK</h1>
<div class="artwork">
<img src="images/artwork/portfolio-design/logos/atomic-heart/atomicH-heart_0910.png" />
</div>
<div class="rule">
</div>
<p>Here you will find arwork produced for (or for sale at) the conventions that Atomic Glam attends. Our premier convention is Anime Weekend Atlanta held in Atlanta each September.<br />(Above: The Atomic Heart Logo of Atomic Glam)</p>
<div style="display:none;">
<?php include("artwork-gallery-digital.php"); ?>
<?php include("sliders/slider-artwork-conventions.php"); ?>
</div>
</div>
The js I'm using:
<script type="text/javascript">
altViews = function(next_img) {
document.getElementById("bigPicture").src = next_img;
}
function changeDiv(id) {
var target = document.getElementById('generic');
var id = document.getElementById(id);
target.innerHTML = id.innerHTML;
}
function callSlider(slides) {
var target2 = document.getElementById('generic-slider');
var slides = document.getElementById(slides);
target2.innerHTML = slides.innerHTML;
}
</script>
An example of the slider:
<div class="thumbs-slider-field" id="conventions1">
<div id="prev">
<img src="../images/gallery-scroll-left.png" width="42" height="120" />
</div>
<div id="thumbs-slider">
<img src="../images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
<img src="../images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
<img src="../images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/>
<img src="../images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
<img src="../images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/>
</div>
<div id="next">
<img src="../images/gallery-scroll-left.png" width="42" height="120" onclick="callSlider('conventions2')" />
</div>
</div>
Any thoughts why one is canceling out the other?

Image effect in website

Please can anyone tell me the coding in terms of Js, css for displaying image effect like one in http://dalailama.com/ ie changing of images one after another. If possible let me know about adding video link in the sidebar with the minor screen.
This should do the trick:
HTML:
<div id="testers">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
<div id="morework">
<div class="holderdiv">
<div class="tester">
<img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" />
</div>
</div>
<div class="holderdiv">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
</div>
CSS:
#morework{display:none;}
jQuery:
$(document).ready(function(){
function runIt(){
$('#morework').find('.holderdiv').each(function(i, elem) {
$("#testers").delay(5000).fadeOut(1000, function() {
$(this).html($(elem).html());
}).fadeIn(1000, runIt);
});
};
runIt()
});
Check it out in action here - http://jsfiddle.net/sfsPx/

Categories