My code doesn't work.
Currently the mouse over part is working but not mouse out .
here is my code:
<script type="text/javascript">
function changeBtn(x){
x.style.marginTop="50px";
}
function returnBtn(y){
y.style.marginTop="-50px";
}
<ul>
<li> <img src="images/home.gif" alt="home" onmouseover="changeBtn(this)" onmouseout="returnBtn(this)"></li>
</ul>
Firebug shows an error on line 6 :"marginTop is ignored"
The answer is :
<a href="home.html" target="content" onmouseover="document.getElementById('homeImg').src='images/frnds-btn.gif';" onmouseout="document.getElementById('homeImg').src='images/hobbies-btn.gif';" ><img src="images/home-btn.gif" alt="home" id="homeImg" ></a>
i used other images to test the current code.
Related
This question already has answers here:
Change an image with onclick()
(10 answers)
Closed 1 year ago.
I have a menu with images like icons, when I click on one of them it will show something different, and I'd like to change the image when it's 'active', turn it into red and back in grey when I click on the next one, I'm sure if I'm clear. I've tried a lot of thing but nothing actually works.
How it looks right now
how it's supposed to look
and when I click on the next one
so here's my actual code, its 100% html/css but i can also use JS
thank you
<div class="filter-foodmenu-tab">
<ul class="nav nav-tabs" role="tablist">
<li>
<a data-toggle="tab" href="#foodmenu1" role="tab"><span>
<img src="menu/cat-midi_grey.png" width="40px" class="foodmenu1" id ="img1" onclick="changeImage()"></span><br/><br/>
formule midi</a>
</li>
<li>
<a data-toggle="tab" href="#foodmenu2" role="tab"><span>
<img src="menu/cat-entree_grey.png" width="40px" class="foodmenu2" id ="img2"></span><br/><br/>
entrées</a>
</li>
<li>
<a data-toggle="tab" href="#foodmenu3" role="tab"><span>
<img src="menu/cat-piadina_grey.png" width="40px" class="foodmenu3" id="img3" ></span><br/><br/>
piadinas</a>
</li>
<li>
<a class="active" data-toggle="tab" href="#foodmenu3-1" role="tab"><span>
<img src="menu/cat-piadina_grey-1.png" width="40px" class="foodmenu3-1" id="img4"></span><br/><br/>
la pinsa</a>
</li>
<li>
<a data-toggle="tab" href="#foodmenu4" role="tab"><span>
<img src="menu/cat-pates_grey.png" width="40px" class="foodmenu4" id="img5"></span><br/><br/>
pâtes</a>
</li>
<li>
<a data-toggle="tab" href="#foodmenu5" role="tab"><span>
<img src="menu/cat-dessert_grey.png" width="40px" class="foodmenu5" id="img6"></span><br/><br/>
desserts</a>
</li>
<li>
<a data-toggle="tab" href="#foodmenu6" role="tab"><span>
<img src="menu/cat-bambino_grey.png" width="70px" class="foodmenu6" id="img7"></span><br/>
menu bambino</a>
</li>
</ul>
</div>
You can use a simple JS function for that.
First of all, add the onclick="changeImage(this);" to every img tag you want to handle it's click event.
Then, add this html tag to contain the JS code:
<script>
var prevImage = undefined;
function changeImage(imgElement) {
if(prevImage) {
prevImage.src = prevImage.src.replace('red', 'grey');
}
imgElement.src = imgElement.src.replace('grey', 'red');
prevImage = imgElement;
}
</script>
I'm trying to create a basic slideshow so when you click the thumbnail in the nav the main image changes to that one. I have a JS function running in my head and when i click a thumbnail that image replaces the main image for a fraction of a second, before being reset. I'm really new to coding so i'd appreciate any help given!
``` <head>
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<title>Gem Website</title>
</head>
<body>```
```<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='gem 4-3.jpg'>
</div>
</div>
</div>```
```<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-3.jpg');">
<img class="img-thumb" src="gem 4-3.jpg">
</a>
</li>
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-4.jpg');">
<img class="img-thumb" src="gem 4-4.jpg">
</a>
</li>
</ul>
</div>
<body>```
From your code, it looks like your thumbnails and the image your are supposed to be replacing are the same. What you see is just a flicker when you set the new src, but the image source is the same.
The issue is happening because of the a tag must be reloading the page on click.
Here is a solution without the a tag or if you want to keep the a tag in check out preventDefault() on an <a> tag
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='https://via.placeholder.com/150/0000FF'>
</div>
</div>
</div>
<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/0000FF');">
<img class="img-thumb" src="https://via.placeholder.com/150/0000FF">
</li>
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/FF0000');">
<img class="img-thumb" src="https://via.placeholder.com/150/FF0000">
</li>
</ul>
</div>
i wanna create a HOVER event for meta "a" in this code in order to change its background color but it doesnt seem to work, i dont really know what im missing, here it is:
document.addEventListener("DOMContentLoaded", function() {
$("#admin_symbol").hover(function(){
$("#header_div2").css("background-color","black");
},
function(){
$("#header_div2").css("background-color","#222222");
}
);
$("#sub_menu_admin").hide();
$("#admin_symbol").click(function(){
$("#sub_menu_admin").slideToggle();
})
<!-- i create it here -->
$(".class_admin").hover(function(){
$(this).css("background-color","#cccccc");
}
,
function(){
$(this).css("background-color","white");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header">
<div id="header_div1">
Quảng trị hệ thống
</div>
<div id="header_div2">
<ul>
<li id="admin_symbol"><span id="admin_welcome"> Xin chào: Admin</span></li>
<ul id="sub_menu_admin">
<li id ="admin_prolife"><a class="class_admin" id ="admin_a1" href="#"><img id="admin_prolife_symbol" src="https://cdn3.iconfinder.com/data/icons/user-with-laptop/100/user-laptop-512.png">  Prolife</a></li>
<li id="admin_changepw"><a class="class_admin" id ="admin_a2" href="#"><img id="admin_changepw_symbol" src="http://simpleicon.com/wp-content/uploads/setting2.png">   Đổi mật khẩu</a></li>
<li id="admin_logout"><a class="class_admin" id ="admin_a3" href="#"><img id="admin_logout_symbol" src="https://cdn4.iconfinder.com/data/icons/basic-ui-elements/700/012_power-512.png">  Log out</a></li>
</ul>
</ul>
</div>
</div>
In Case this could help :
+My full project: https://jsfiddle.net/HiepNguyen/do7nsyr5/93/
i did try create a hover event with CSS but no luck.
i appreciate every help.
[Update]: i have figured out that when i use my code on jsfiddle it runs fine, but when i run it on local, the sub menu items will not change its background color as i want, still dont know why.
I am really stuck on this. I have a dropdown menu called "Example" that contains 2 submenus "submenu1" and "submenu2". When either of the 2 is clicked, it will contain an image thumb which will be displayed in lightbox style. But as of now both thumbs are displayed and this is not what I want because the final web page will contain hundreds of images. Is there a way to make the images appear only when one sub-menu is clicked, according to the code below. Thanks
<!DOCTYPE html>
<head>
</head>
<body>
<!-- Portfolio Projects -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">CATEGORIES</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle"
>BAPTISM
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
BOY CLOTHING
<ul class="dropdown-menu">
<li><a href="#filter" data-option-
value=".boy" tabindex="-1">Clothing</a></li>
</ul>
</li>
<li class="dropdown-submenu">
GIRL CLOTHING
<ul class="dropdown-menu">
<li><a href="#filter" data-option-
value=".girl" tabindex="-1">Clothing</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</nav>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- gallery starts here -->
<li class="item-thumbs span3 boy"><!-- Fancybox - Gallery Enabled
- Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="boy"
title="" href="_include/img/work/full/boy_clothing.jpg">
<span class="overlay-img"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/boy_clothing.jpg" alt="">
</li>
<li class="item-thumbs span3 girl">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="girl"
title="" href="_include/img/work/full/girl_clothing.jpg">
<span class="overlay-img"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/girl_clothing.jpg"
alt="">
</li>
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
</body>
</html>
WOW I can't believe I found the solution after so many days by adding just a simple word. Didn't have to mess with javascript at all. Actually in the external .js file of the website I was told by a code developer to add the following: filter: '.foobar' See the final result below $container.isotope({
// options
animationEngine: 'best-available',
itemSelector : '.item-thumbs',
filter: '.foobar',
layoutMode : 'fitRows'
});
Here is what I would do:
I try and keep the logic simple, then you can just use something similar on your site :)
(Please S.O. Correct me if I am wrong here!)
CSS:
Give your submenus an ID
JavaScript:
// 2 event listeners that will run a function when the submenu is clicked:
var sub_menu_1 = document.getElementById( "submenu1" );
sub_menu_1.addEventListener("click", DISPLAY_menu_1 , false);
var sub_menu_2 = document.getElementById( "submenu2" );
sub_menu_2.addEventListener("click", DISPLAY_menu_1 , false);
function DISPLAY_menu_1 () {
// Do whatever CSS you need here, I simply make the entire DIV 'visible':
sub_menu_1.style.visibility = 'visible';
// For good measures, lets make submenu2 'invisible':
sub_menu_2.style.visibility = 'hidden';
}
function DISPLAY_menu_2 () {
// Same in Reverse
sub_menu_2.style.visibility = 'visible';
sub_menu_1.style.visibility = 'hidden';
}
EDIT:
Whew! This took a while.. Sorry about that!
Check out this example:
I basically made 3 versions for you to try out.
Simply click the Edit this Pen button to check the code!
Example
$(".fancybox").fancybox();
The HTML is this:
<img src="img/team/max.jpg" alt="max" class="kat"/>
<ul class="referenzen">
<li>
<a class="fancybox" data-title-id="title-1" href="img/logo.jpg">
<img src="img/logo.jpg" alt=""/>
</a>
<a class="fancybox" data-title-id="title-2" href="img/logo.jpg">
<img src="img/logo.jpg" alt=""/>
</a>
</li>
</ul>
If i click the img class="kat" the fancybox should start with the a tag elements. And not with the class="kat" Element.
Can anybody help me?
I'm not sure if I understood what you're asking for, but how about something like this: Register an event handler for the first image and simulate a click on the first fancyboxed-image:
$('img.kat').click(function() {
$(this).next().find('.fancybox:first').click();
});