I am using Dreamweaver for the first time to code. I am intermediate in HTML.
I've been trying to use a png file as a button. I've found some sources stating that a ...
<button src=Home_button> </button>
... will work, but I have tried it, and to no avail, it does not work. Any suggestions?
NOTE:
I am also using a CSS to build this Very basic website.
Just add background-image to your button.
<button id="home_button">click me</button>
and then add:
#home_button {
background-image: url(...);
}
You may need to add further styling to it of course, such as widths and other background properties to get it just right. But this is how you add a background image to a button.
Here's a working demo as well:
#home_button {
width: 150px;
height: 150px;
background-image: url('http://i.stack.imgur.com/sfed8.png');
background-size: cover;
background-color: #eee;
}
<button id="home_button"></button>
You can add an img tag inside your button tag.
<button id="bar" type="submit"><img src="http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" /></button>
There are many ways to create something that looks like an image and behaves like a button.
Here-below are code examples demonstrating 5 options worth considering...
Option 1 :
You could put an <img> element inside a <button> element :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
button, img {
padding: 0;
font-size: 0;
border: none;
}
<button id="myButton">
<img src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt="">
</button>
(see also this Fiddle)
Option 2 :
You could use an <a>-tag instead :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
a {
border: none;
display: inline-block;
font-size: 0;
}
<a id="myButton" href="#">
<img src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt="">
</a>
(see also this Fiddle)
Option 3 :
You could just attach your click handler directly to your image :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
<img id="myButton" src="http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150" alt="">
(see also this Fiddle)
Option 4 :
You could set your image as a background-image of a <button>-tag or other tag that represents a button.
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
input[type=submit] {
background: url("http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150");
width: 150px;
height: 150px;
border: none;
}
<input type="submit" id="myButton">
(see also this Fiddle)
Option 5 :
You could set your image as a background-image of an <a>-tag, a <div>-tag or another tag that doesn't represent a button :
document.getElementById("myButton").addEventListener("click", function() {
alert('Button clicked');
});
div {
background: url("http://www.gravatar.com/avatar/bf4cc94221382810233575862875e687?s=150");
width: 150px;
height: 150px;
border: none;
}
<div id="myButton"></div>
(see also this Fiddle)
You could do <img src="#" alt="" /> to achieve what you want.
There are several ways to use an image as a button..
<a href="your_link.html">
<img id="mypic' src="path_to_your.png" alt="MyImage" width="200" height="300" />
</a>
css..
#mypic {
background: #390239;
color:#7e4a00;
border:#7e4a00 2px solid;
border-color:;
outline:none;
padding: 6px;
border-radius:5px;
text-align: center;
}
Chris also has a good answer... it depends on what looks good on the page, as well as your coding knowledge.
Here's what you can do...
HTML
<button>Click Me</button>
CSS
button {
display: inline-block;
height: 50px // height of your button image
text-indent: -9999px // hide if you have text inside <button>
width: 100px // width of your button image
}
Hope this will help :)
Related
I have a codepen link https://codepen.io/robgolbeck/pen/bVGmop which is quite similar to what I want. The only thing I want is that on click of thumbs image the large image should be replaced with the clicked thumbs image and it should not be present in the thumbs list.In total only 5 images should be present in rotation whereas here there are 6(5+ 1repeated in thumbs). I have tried to tweak the JS but it doesn't work as expected. Can anyone please help. Stuck with this problem since morning. Thanks in advance.
JS
$('#thumbs img').click(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$(this).attr('src',$('#largeImage').attr('src').replace('large','thumb'));
});
in the click handler event of #thumbs img, you can first show all the images and then hide current image. to start you can trigger click on first image.
$('#thumbs img').click(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$('#description').html($(this).attr('alt'));
$('#thumbs img').show();
$(this).hide();
});
$('#thumbs img').first().trigger('click');
You can simply use jQuerys show() and hide() methods. First show all child elements of #thumbs and then hide the currently clicked element with $(this).hide();.
To initially hide the first image, you can use $('#thumbs').children().first().hide();
$('#thumbs').children().first().hide();
$('#thumbs img').click(function() {
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
$('#thumbs').children().show();
$(this).hide();
});
#thumbs {
padding-top: 10px;
overflow: hidden;
}
#thumbs img,
#largeImage {
border: 1px solid gray;
padding: 4px;
background-color: white;
cursor: pointer;
}
#thumbs img {
float: left;
margin-right: 6px;
}
#description {
background: black;
color: white;
position: absolute;
bottom: 0;
padding: 10px 20px;
width: 525px;
margin: 5px;
}
#panel {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery">
<div id="panel">
<img id="largeImage" src="http://robgolbeck.com/demos/image-swap/image_01_large.jpg" />
</div>
<div id="thumbs">
<img src="http://robgolbeck.com/demos/image-swap/image_01_thumb.jpg" alt="1st image description" />
<img src="http://robgolbeck.com/demos/image-swap/image_02_thumb.jpg" alt="2nd image description" />
<img src="http://robgolbeck.com/demos/image-swap/image_03_thumb.jpg" alt="3rd image description" />
<img src="http://robgolbeck.com/demos/image-swap/image_04_thumb.jpg" alt="4th image description" />
<img src="http://robgolbeck.com/demos/image-swap/image_05_thumb.jpg" alt="5th image description" />
</div>
</div>
I think attr method of jQuery is causing issue, try using prop method as shown in below snippet :
$('#thumbs img').click(function(){
$('#largeImage').prop('src',$(this).prop('src').replace('thumb','large'));;
$('#description').html($(this).prop('alt'));
});
$('#thumbs img').click(function(){
$("#thumbs img").each(function(){$(this).show();});
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$('#description').html($(this).attr('alt'));
$(this).hide();
});
I have created an element that is displayed when I am over a particular box.
If I move my mouse over the box I can see my element but then I need to move my mouse in and out twice for the element to disappear. How can I fix it? Shouldn't the element hide itself once I move the mouse out?
How do I make my box only show when mouse is over the box?
<script>
$("#box").on("mouseover",function()
{
$("#my-box").toggle();
});
</script>
I tried to hide it myself, but it didn't work:
$("#box").on("onmouseout", function()
{
$("#my-box").hide();
});
You can use mouseover and mouseout in a same eventlistener like one below:
$("#box").on("mouseover mouseout",function()
{
$("#my-box").toggle();
});
#my-box{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
Box here
</div>
<div id="my-box">
My Box
</div>
FIDDLE DEMO
The problem with your code is you're using onmouseout instead of use mouseenter and mouseleave method.
You can use hover:
$('#box').hover(function(){
$('#my-box').toggle();
});
You can use combination of both
$("#box").mouseover(function() {
$("#my-box").show();
}).mouseout(function() {
$("#my-box").hide();
});
Example
jQuery Solution
HTML
<div class="box" id="action"></div>
<div class="box" id="hidden"></div>
JS
$("#action").on("mouseover mouseout",function()
{
$("#hidden").toggle();
});
CSS
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#hidden{
display: none;
}
JSFiddle
Allthough it would be better doing this by just using CSS.
CSS Only Solution
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#action:hover + #hidden{
display: block;
}
#hidden{
display: none;
}
JSFiddle
I want to create a popup/div at a specific location on the screen like image below
Say it should start after edit button and its position should be exactly the same as shown in the image.
Check out my JSFiddle that I made for you. This is quite simple to do. This example requires JQuery though, but if you fiddle around: I'm sure it can run without it as well :)
HTML:
<div id="box1">
This is box 1
<br />
<button onClick="openEditBox();" id="editButton">Edit</button>
</div>
<div id="box2" style="display: none;">
This is the edit box...
<br />
Edit stuff goes here...
</div>
JavaScript:
$(document).mouseup(function (e) {
var container = $("#box2");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
container.hide();
}
});
function openEditBox() {
var editButtonPosition = $("#editButton").position();
$("#box2").css({top: editButtonPosition.top + 20, left: editButtonPosition.left});
$("#box2").show();
}
CSS:
#box1 {
background-color: #AAA;
border: 1px solid #333;
padding: 10px;
width: 200px;
}
#box2 {
background-color: lightblue;
border: 1px solid #333;
padding: 10px;
width: 200px;
z-index: 1000;
position: fixed;
left: 0;
top: 0;
}
Run it live on JSFiddle to test it out and see how it works:
http://jsfiddle.net/fpde7by8/
About the down votes: People here seem to hate simple questions... But I don't see the problem. Everyone was a beginner at some point.
The popup div should be the child of the first div(maybe the Edit button's div) , set the first div position:relative, the popup div position:absolute, so the popup's position is relative to the first div,then you can use code like this : 'left:50px;top:50px;'
I've got a div learn-more that expands to the size of the whole page by adding a CSS class as follows:
.learn-more{
padding:10px;
font-size: 20px;
text-align: center;
margin-top:20px;
font-family: klight;
-webkit-transition:2s;
-moz-transition:2s;
transition:2s;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.clicked{
width:100% !important;
visibility: visible;
height: 600px !important;
margin-top:-111px !important;
z-index: 10;
}
This addition is done using JS as follows:
$('.learn-more').on('click', function(){
$(this).addClass('clicked');
$(this).addClass('fire-inside');
});
Now the problem is that I have a button inside the expanded div to reduce the size of this same expanded window.
The JavaScript to do the same is
$('.close-overlay').on('click', function(){
$('.learn-more-btn').removeClass('clicked');
$('.learn-more-btn').removeClass('fire-inside');
});
However this doesn't work as the browser is reading the click on close-overlay as a click on learn-more as the HTML for it as
<div class="learn-more fire-btn">
<p class="fmore">
Find out more
</p>
<div class="inside-text">
<p >
...
</p>
<p class="close-overlay">Close</p>
</div>
</div>
I've added a fiddle for it:
DEMO: http://jsfiddle.net/Newtt/AqV96/
On clicking close, I need the overlay to revert to original size.
Try this on for size!
$(".fmore").on("click", function () {
$(".learn-more").addClass("clicked");
});
$(".close-overlay").on("click", function () {
$(".learn-more").removeClass("clicked");
});
$('.learn-more').on('click', function(){
if ( $(this).hasClass('clicked') )
$(this).removeClass('clicked').removeClass('fire-inside');
else
$(this).addClass('clicked').addClass('fire-inside');
});
Just use the same on click event and check if it has class 'clicked'. You could also use toggle function.
I know it seems trivial, but I'm having some trouble wrapping my head around this.
<div id="divA" style="width: 400px; height: 400px; background-color: #FF0000;">
<div id="divB" style="float: left; width: 200px; height: 200px; background-color: #FFFF00;">
<div id="divC" style="float: left; width: 100px; height: 100px; background-color: #FF00FF;">
</div>
</div>
</div>
What I need is a rule that applies to all divs, like div:hover { background-color: #000000 !important; }, that only affects the first parent div of the event (when I hover divC, I want the background color of divC to change to black, but not the background colors of divB or divA)... like the inspector does in Google Chrome.
Any ideas?
I don’t believe it is possible to do this with just CSS, but you can with JavaScript.
The key is to use event.stopPropagation() on the mouseover event.
Here is an example using jQuery: http://jsfiddle.net/K96DS/2/
$('div').on('mouseover', function(){
$(this).addClass('hovered')
// this is the key, this stops te mouover event
// from bubbling up to the parent elements
event.stopPropagation();
}).on('mouseout', function(){
$(this).removeClass('hovered')
})
Are you thinking using something like .this because of an odd behavior in :hover?
.mouseover(function(){
$(this).addClass('selected');
});
Are you looking for something like this ?
jQuery Solution:
$('div').each(function(){
$(this).on({
mouseover:function(){
$(this).css('background-color','black');
},
mouseout:function(){
$(this).css('background-color','');
}
});
});
http://jsfiddle.net/j8ebE/2/
#divC:hover #divA { background-color: #FF0000 !important; }
#divC:hover #divB { background-color: #FFFF00 !important; }
Maybe hacks... :)