I used onmouseover and onmouseout for viewing image but its not working in chrome. need solution for this problem.
script is
<script>
var img;
window.onload = function () {
img = document.getElementById ("img");
}
</script>
<img style= "position:absolute;TOP:90px; LEFT:185px;visibility:hidden;"
class="two"
id="img"
src="services/web2.png"
width="800" height="500" alt=""/>
<div class="item home">
<img src="imagess/bg_home.png" alt="" width="199" height="199" class="circle"/>
<h2>IT</h2>
<ul>
<li>
<a href="target4"
onMouseOver="img.style.visibility='visible'; img.src='services/web2.png'"
onMouseOut="img.style.visibility='hidden';">Sales & Service</a>
</li>
<li>
<a href="target5"
onMouseOver="img.style.visibility='visible'; img.src='services/web2.png'"
onMouseOut="img.style.visibility='hidden';">CCTV</a>
</li>
<li>
<a href="target6"
onMouseOver="img.style.visibility='visible'; img.src='services/web2.png'"
onMouseOut="img.style.visibility='hidden';">DVR</a>
</li>
</ul>
</div>
You are using very obtrusive javascript, it is simply bad practice.
So tracing the mistake don't make so much sense.
People who suggested using jQuery are very much right, and you will do yourself a favour
by taking that advice.
Using onMouseOver and other javascript directly on DOM element is just not how things are done anymore.
Separate your JavaScript
window.onload = function () {
var img = document.getElementById('img'),
links = ['target4', 'target5', 'target6'],
i = links.length, e,
over = function over(){
img.style.visibility='visible';
img.src='services/web2.png';
},
out = function out(){
img.style.visibility='hidden';
};
while( --i >= 0 ){
e = document.getElementById(links[i]);
e.addEventListener('mouseover', over, false);
e.addEventListener('mouseout', out, false);
}
}
from your HTML
<img id="img" class="two" src="services/web2.png" alt=""/>
<div class="item home">
<img src="imagess/bg_home.png" alt="" width="199" height="199" class="circle"/>
<h2>IT</h2>
<ul>
<li>
<a id="target4" href="target4">Sales & Service</a>
</li>
<li>
<a id="target5" href="target5">CCTV</a>
</li>
<li>
<a id="target6" href="target6">DVR</a>
</li>
</ul>
</div>
Working example fiddle.
You better use jQuery for that kind of stuff, that should work on all browsers.
http://api.jquery.com/mouseover/
try this:
css:
#img {
position:absolute;
top:90px;
left:185px;
visibility:hidden;
}
JS:
$(function(){
var $img = $('#img');
// selector container for image
var $container = $('.item');
$container.find('ul li a')
.bind('mouseover', function(event) {
var target = $(this).attr('href'); //if you need to differentiate
$img
.css('visibility', 'visible')
.attr('src', 'services/web2.png');
})
.bind('mouseout', function(event) {
var target = $(this).attr('href'); //if you need to differentiate
$img
.css('visibility', 'hidden');
})
});
HTML:
<img class="two" id="img" src="services/web2.png" width="800" height="500" alt="" />
<div class="item home">
<img src="imagess/bg_home.png" alt="" width="199" height="199" class="circle"/>
<h2>IT</h2>
<ul>
<li>Sales & Service</li>
<li>CCTV</li>
<li>DVR</li>
</ul>
</div>
Use jQuery!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('li a').mouseenter(function () {
$('li a').hide(1);
}).mouseout(function () {
$('li a').show(1);
});
});
</script>
</head>
<body>
<ul>
<li><a id="link" href="http://www.tivo.com/">DVR</a></li>
</ul>
</body>
</html>
Related
My jQuery code is working but I want to minimal it by data attribute. Please see below my HTML and jQuery code.
The functions below are repeated upto four times and I want to minimize/reduce this repetition. Thanks in advance.
$('.nav-menu-list ul li:nth-child(1)').hover(function() {
$('#item-01').fadeIn();
}, function() {
$('#item-01').fadeOut();
});
$('.nav-menu-list ul li:nth-child(2)').hover(function() {
$('#item-02').fadeIn();
}, function() {
$('#item-02').fadeOut();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="nav-menu-list">
<ul>
<li data-id="item-01"><h2>home</h2></li>
<li data-id="item-02"><h2>about us</h2></li>
<li data-id="item-03"><h2>category</h2></li>
<li data-id="item-04"><h2>news room</h2></li>
<li data-id="item-05"><h2>blog</h2></li>
<li data-id="item-06"><h2>contact us</h2></li>
</ul>
</span>
<span class="nav-menu-list-details">
<div id="item-01"><img src="images/home-preview.png" alt="" /></div>
<div id="item-02"><img src="images/home-preview.png" alt="" /></div>
<div id="item-03"><img src="images/home-preview.png" alt="" /></div>
<div id="item-04"><img src="images/home-preview.png" alt="" /></div>
<div id="item-05"><img src="images/home-preview.png" alt="" /></div>
<div id="item-06"><img src="images/home-preview.png" alt="" /></div>
</span>
You can use only a single function to control all of them.
But, for this, in the jQuery selector you must use $('.nav-menu-list ul li').
With this selector, hover() context will be the li itself, then, just get the data-id of the current hovered li and then use it to select the div you want to target.
See below, I suggest to use full page ("Expand Snippet") mode on the snippet to better visualization:
$('.nav-menu-list ul li').hover(function() {
let id = "#" + $(this).data("id")
$(id).fadeIn();
}, function() {
let id = "#" + $(this).data("id")
$(id).fadeOut();
});
.nav-menu-list-details div{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="nav-menu-list">
<ul>
<li data-id="item-01"><h2>home</h2></li>
<li data-id="item-02"><h2>about us</h2></li>
<li data-id="item-03"><h2>category</h2></li>
<li data-id="item-04"><h2>news room</h2></li>
<li data-id="item-05"><h2>blog</h2></li>
<li data-id="item-06"><h2>contact us</h2></li>
</ul>
</span>
<span class="nav-menu-list-details">
<div id="item-01"><img src="images/home-preview.png" alt="" />ITEM_1</div>
<div id="item-02"><img src="images/home-preview.png" alt="" />ITEM_2</div>
<div id="item-03"><img src="images/home-preview.png" alt="" />ITEM_3</div>
<div id="item-04"><img src="images/home-preview.png" alt="" />ITEM_4</div>
<div id="item-05"><img src="images/home-preview.png" alt="" />ITEM_5</div>
<div id="item-06"><img src="images/home-preview.png" alt="" />ITEM_6</div>
</span>
You should consider that the event target is the single object, even if the target includes a multitude of items:
$('.nav-menu-list ul li').hover(function() {
var id = $(this).data().id;
$("#"+id).fadeIn();
}, function(){
var id = $(this).data().id;
$('#'+id).fadeOut();
});
When I insert some php code to make this dynamic. The problem becomes that when the website refreshes there i cant get to have a image preselected. How can I make that when I refresh the site a img is from UL is preselected.
Html:
<html>
<div>
<div class="Vareside">
<div class="Venstredel">
<div class="Bildeholder">
<img src="Bilder/1.jpg" alt="">
</div>
<div class="ProduktBilder">
<ul class="p_ul">
<li class="p_li"><img src="Bilder/1.jpg" alt=""></li>
<li class="p_li"><img src="Bilder/2.jpg" alt=""></li>
<li class="p_li"><img src="Bilder/3.jpg" alt=""></li>
<li class="p_li"><img src="Bilder/1.jpg" alt=""></li>
</ul>
</div>
</div>
</html>
Script:
<script>
$(document).ready(function() {
$("ul li img").click(function(){
var CurrentImageURL = $(this).attr("src");
$(".Bildeholder img").attr("src", CurrentImageURL)
});
});
</script>
I would like to get a certain innerText from a clicked element in a HTML document that I clicked.
The corresponding HTML looks something like this:
!DOCTYPE html>
<html>
<head>
<title>Some title</title>
</head>
<body>
<ul class="categories">
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>
</body>
</html>
A Javascript function should return either "First" or "Second" depending on the clicked link.
My basic idea is to add an event listener and use the returned event to get the content of the span element:
function(){
document.addEventListener('click', function(e) {
e = e || window.event;
var spanText= e.path[i].innerText; //Don't know how to assign i correctly
return spanText;
}, false);
}
My problem is that I don't know how to define i or if there is something more suitable than .path[i] to work with. Depending on whether I click the image or the text.
Add the click events to the list items
in the handler, retrieve the 'span' child and get its text
var lis = document.querySelectorAll('.categories li');
lis.forEach(function(el) {
el.addEventListener('click', onClick, false);
})
function onClick(e) {
var li = e.currentTarget;
var span = li.querySelector('span');
console.log(span.innerText);
}
<ul class="categories">
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>
function init(){
document.addEventListener('click', function(e) {
var link = e.target.closest('a');
if(!link)return;
e.preventDefault();
var text = link.textContent;
alert(text);
return spanText;
});
}
init();
You can check what concrete element was clicked and then return its text. if you want to have some additional information - use data- attributes and read target.dataset to read it.
document.addEventListener('click', function(e) {
var target = e.target;
if(target.tagName === 'SPAN') {
console.log(target.innerText);
return target.innerText;
}
}, false);
<ul class="categories">
<li>
<a href="#">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>
If the structure is consistent, then there will always be the same number of <span> elements as <a> elements.
Consequently, if you know the user just clicked on the second <a>, you'll know the <span> you need to return is the second <span>.
Working Example:
var links = document.querySelectorAll('li a');
var spans = document.querySelectorAll('li div span');
function getTextContent(e) {
e.preventDefault();
var linksArray = Array.prototype.slice.call(links);
var index = linksArray.indexOf(this);
console.log(spans[index].textContent);
}
links.forEach(function(link){
link.addEventListener('click', getTextContent, false);
});
<ul class="categories">
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>First</span>
</div>
</a>
</li>
<li>
<a href="http://www.example2.com/1">
<div>
<img src="http://www.example.com/someSource">
<span>Second</span>
</div>
</a>
</li>
</ul>
Sorry for my bad language..
I'm late to reply.
Maybe it will help someone else;
window.addEventListener("click", (event) => { //dblclick
let div = event.target.innerText; // <-- the code you want
window.onClick(div);
});
And..
function onClick(div) {
console.log(`(Tıklandı-Clicked) innerText: ${div}`);
}
the code you want : let div = event.target.innerText;
I start learn Javascript and I need your help.
I have big image and under big image there are 3 thumbnails. If user click second thumbnail, big image has to changes to second data-bigimage.
And swipebox link has to change to second data-original image. The same for other images.
HTML:
<div class="profile-gallery">
<div class="profile-gallery_top js-bigImg">
<a href="img/bigImg1.jpg" class="swipebox">
<img class="profile-bigImage" src="img/bigImg.jpg" alt=""/>
</a>
</div>
<ul class="profile-thumbs">
<li><img src="img/imgThmubs1.jpg" data-bigimage="img/bigImg1.jpg" data-original="img/origImg1.jpg" alt=""/></li>
<li><img src="img/imgThmubs2.jpg" data-bigimage="img/bigImg2.jpg" data-original="img/origImg2.jpg" alt=""/></li>
<li><img src="img/imgThmubs3.jpg" data-bigimage="img/bigImg3.jpg" data-original="img/origImg3.jpg" alt=""/></li>
</ul>
jQuery(document).ready(function( $ ) {
$('.profile-thumbs li').click(function(){
var imageurl = $(this).children('img').data('bigimage');
var imageorig = $(this).children('img').data('original');
$('.profile-bigImage').attr("src", imageurl);
$('.swipebox').attr("href", imageorig);
});
});
$(this) is always the clicked element in a click function matching the selector.
This may do the stuff, try this:
$(".profile-thumbs li img").click(function() {
var bigImg = $(this).data("bigimage"),
original = $(this).data("original");
$(".swipebox").attr("href", original);
$(".profile-bigImage").attr("src", bigImg);
});
look at the below example using jQuery.
`$(this)` will refer the image clicked.
so $(this).attr('src') will be the source of the image which we click.
assign it to the image which is having class profile-bigImage
$('img').click(function(){
var imgsrc=$(this).attr('src');
$('.profile-bigImage').attr('src',imgsrc);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="profile-gallery">
<div class="profile-gallery_top js-bigImg">
<a href="img/bigImg1.jpg" class="swipebox">
<img class="profile-bigImage" src="img/bigImg.jpg" alt=""/>
</a>
</div>
<ul class="profile-thumbs">
<li><img src="img/imgThmubs1.jpg" data-bigimage="img/bigImg1.jpg" data-original="img/origImg1.jpg" alt=""/></li>
<li><img src="img/imgThmubs2.jpg" data-bigimage="img/bigImg2.jpg" data-original="img/origImg2.jpg" alt=""/></li>
<li><img src="img/imgThmubs3.jpg" data-bigimage="img/bigImg3.jpg" data-original="img/origImg3.jpg" alt=""/></li>
</ul>
You can try something like that, it should work
$(document).on('click','.profile-thumbs img', function(event) {
event.preventDefault();
$('.profile-gallery-top a').attr('href', $(this).data('original'));
$('.profile-gallery-top img').attr('src', $(this).data('bigimage'));
});
I have a need to change the src of all the Images found within an UL element. I do have a Jquery library so maybe that will make it easier. The HTML looks like this.
<ul id="sortable" class="ui-sortable">
<li class="ui-state-default">
<img id="aImg" alt="sortable image" src="images/a.jpg" />
</li>
<li class="ui-state-default">
<img id="bImg" alt="sortable image" src="images/b.jpg" />
</li>
<li class="ui-state-default">
<img id="cImg" alt="sortable image" src="images/c.jpg" />
</li>
</ul>
What's the quickest method I could embody to rename all image sources to the same filename with a "-backup" before the file extension?
Pass a callback to .attr():
$('ul img').attr('src', function(i, src) {
return src.replace('.', '-backup.');
});
Try this
$("#sortable li img").each(function(){
this.src = this.src.replace(".jpg", "-backup.jpg");
});
$('ul li img').each(function() {
$(this).attr('src', $(this).attr('src').replace('\.jpg', '-backup.jpg')
})