This is my code:
HTML:
<a href="index2.html">
<input type="image" class="button" value="">
</a>
CSS:
.button {
background:url(example.jpg) no-repeat;
cursor:-webkit-grab;
border: none;
}
What should happen is that it display an image and when I click on, it will navigate to another this site index2.html. It worked with another image but it had an annoying border but after I changed the image it doesn't work any more.
You do not need an input type button, simply use img...
html:
<a href="index2.html">
<img src="example.jpg" />
</a>
css:
a img {
border: none;
cursor: grab;
}
Related
I know this looks very simple, but I have been trying to figure out a solution for an hour now. I have an "a" element with text and an image inside. The problem is that the image goes below the text, and I want them lined up.
a {
text-decoration: none;
color: #fff;
}
a:hover {
color: #ff5c33;
text-decoration: none;
cursor: pointer;
}
#nav-user-logo{
max-height: 16px;
}
<!-- Header right part -->
<div class="dropdown">
<a>
User123
<img src="Images/Icons/user.svg" id="nav-user-logo" alt='User123'>
</a>
<div class="dropdown-content user-dropdown-content" >
<a>AW Admin</a>
<a>Account Settings</a>
<a>Change Password</a>
<a>Logout</a>
</div>
</div>
I didn't have the issue myself but you can do
#nav-user-logo {
max-height: 1em;
display: inline;
}
to guarantee it is inline with the text.
By defect, any browser, with your css will display the image side by side as, I think, you want:
example with your code:
a {
text-decoration: none;
}
a:hover {
color: #ff5c33;
text-decoration: none;
cursor: pointer;
}
#nav-user-logo{
max-height: 16px;
}
<div class="dropdown">
<a>
User123
<img src="https://www.ajvs.com/redirect/5/Agilent_IMG300_UHV_R0343301_1,8926cf9ec9ce009a52f3ea8866b07f5f" id="nav-user-logo" alt='User123'>
</a>
<div class="dropdown-content user-dropdown-content">
<a>AW Admin</a>
<a>Account Settings</a>
<a>Change Password</a>
<a>Logout</a>
</div>
</div>
Probably, you have some kind of "reset" css sheet that is turning all your images as display:block It's quite common in many wordpress themes. You may need to overwrite these css adding img {display:inline-block} or similar rule. Calling to the id image or class to not break your whole theme.
Turns out the issue was something super simple. This code is in a header, on the right side, and the "a" element was too small to display the code and image side by side. I fixed it with the following:
<!-- Header right part -->
<div class="dropdown">
<a style="display:inline-block; width: 150px;">
User123
<img src="Images/Icons/user.svg" id="nav-user-logo" alt='User123'>
</a>
<div class="dropdown-content user-dropdown-content" >
<a>AW Admin</a>
<a>Account Settings</a>
<a>Change Password</a>
<a>Logout</a>
</div>
</div>
I made a button that opens to make sort of like a drop-down page. I also made a button to retract the page and put an image in it, but I want to make the button not show up, only the image. Can anyone help?
HTML:
<button onclick="close1()"><img src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30"></button>
Here's the solution:
.transparent_button {
background-color: transparent;
border: 0px;
}
<button class="transparent_button" onclick="close1()"><img src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30"></button>
But for a better-written solution, you can try this (this won't force CSS uslessly):
<img onclick="close1()"src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30">
The solution: only set transparent border and background for it.
button {
background: transparent;
border: none;
}
<button class="transparent_button" onclick="close1()"><img src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30"></button>
If you don't need the button, but just the image to be clicked on you can leave the button out and use the following code:
<img onclick="close1() src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30" />
Maybe, if you want a border you can box it and style that:
HTML:
<div class="imageBox">
<img onclick="close1() src="https://cdn0.iconfinder.com/data/icons/user-interface-material-4-1/26/368-512.png" alt="close" width="30" />
</div>
CSS:
.imageBox{
border:1px solid #c1c1c1;
/* Other additional styles */
}
Hey all I am hoping you guys can help me? I am trying to edit this and need to be able to add a url when someone clicks the button. Also the ability to download a file. What would I add for this?
<div class="optin" data-lb="editable-optional">
<div class="shadow"></div>
<img src="img/books-small.png" class="minor-image" />
<p>Enter your email to download the guide</p>
<div>
<input id="header-button" type="submit" value="Free Instant Access »" onclick="javascript:return false"/>
Just use the download tag. You can add the image inside the a tag.
<div class="optin" data-lb="editable-optional">
<div class="shadow"></div>
<a href="img/books-small.png" download><img class="minor-
image"/></a>
<p>Enter your email to download the guide</p>
<div>
<input id="header-button" type="submit" value="Free Instant Access »" onclick="javascript:return false"/>
Using <div> s is not recommended by W3C standards.
Why don’ t you just use the hyperlink <a> tag:
Free Instant Access »
You can use CSS styles to make the hyperlink <a> look like a buttom
(taken from W3Schools):
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
I’m using a combination of icons and text for some links in the sidebar on my website, but I want both the icon and text to change if the mouse hovers over either of them. Using MouseOn and ‘hover’ in my CSS file, I’ve managed to get this to work when the mouse hovers over the icon, but if the mouse only hovers over the text, only the text changes but not the icon as well. Does anybody know a way to do this please? A link to my site and the code I’m currently using are below. Thanks everybody.
http://www.retelevise.com
<span class="social-media-sidebar-panel">
<a href="https://www.facebook.com/re.televise" target="_external window fa">
<img src="http://www.retelevise.com/wp-content/themes/myownzee/branding/
socialmedia-facebook-1.png"
onmouseover="this.src='http://www.retelevise.com/wp-content/themes/myownzee/
branding/socialmedia-facebook-2.png'"
onmouseout="this.src='http://www.retelevise.com/wp-content/themes/myownzee/
branding/socialmedia-facebook-1.png'"
class="social-media-sidebar-icons" title="Facebook" alt="Facebook">
<span style="font-size: 0.8em">Facebook</span></a></span>
try moving your onmouseover and onmouseout events to anchor and change the 'this.' to reference the img by ID.
I've made several changes to the way you've done this:
Moved your styling and javascript to external files
Used JQuery for animations (simply easier)
This version now makes use of multiple images.
JSFiddle DEMO
HTML:
<span class="sm">
<a href="#" class="mediaLink">
<img class="mediaPic" data-hover="http://placehold.it/60/4477ee/ffffff" src="http://placehold.it/60/224499/ffffff"/>
<div class="mediaText"> Facebook</div>
</a>
</span>
<span class="sm">
<a href="#" class="mediaLink">
<img class="mediaPic" data-hover="http://placehold.it/60/ee9933/ffffff" src="http://placehold.it/60/777777/ffffff"/>
<div class="mediaText"> Stack Overflow</div>
</a>
</span>
<span class="sm">
<a href="#" class="mediaLink">
<img class="mediaPic" data-hover="http://placehold.it/60/66aaff/ffffff" src="http://placehold.it/60/3388aa/ffffff"/>
<div class="mediaText"> Twitter</div>
</a>
</span>
<span class="sm">
<a href="#" class="mediaLink">
<img class="mediaPic" data-hover="http://placehold.it/60/dd1122/ffffff" src="http://placehold.it/60/991122/ffffff"/>
<div class="mediaText"> YouTube</div>
</a>
</span>
JavaScript (Using JQuery):
$(document).ready( function() {
$(".mediaLink").on( {
mouseenter: function() {
$(this).children(".mediaPic").data("static", $(this).children(".mediaPic").attr("src"));
$(this).children(".mediaText").css("color", "orange");
$(this).children(".mediaPic").attr("src", $(this).children(".mediaPic").data("hover"));
}, mouseleave: function() {
$(this).children(".mediaText").css("color", "white");
$(this).children(".mediaPic").attr("src", $(this).children(".mediaPic").data("static"));
}
});
});
CSS:
.mediaLink {
display: block;
}
.mediaPic {
float: left;
width, height: 60px;
}
.mediaText {
height: 60px;
width: 150px;
padding-left: 10px;
line-height: 60px;
background: #242424;
color: white;
font-family: "Consolas"," Arial";
font-size: 18px;
float: left;
}
.sm {
margin: 5px;
float: left;
}
Explanation:
I'm making the <a> change its children (.mediaPic and .mediaText) when its being hovered over. On mouseenter is when the mouse is hovered over, and mouseleave is returning the <a> back to its regular state.
The part called data-hover is the url of the picture you wish to set the image to, where you leave src as the image you want to have as the default. When you hover over the image, the script will "remember" the original src and set it back to that when you leave the image (mouseleave).
Here i have some code from my website I'm making. I'm having trouble styling the links within css. I'm not sure why they won't change. Also the reason I've used class is because i have this code repeated 4 times (don't worry about why :P) Btw I've also tried putting the 'a' infront of .profileLinks that didnt work either :(
Here is the external CSS style sheet
#trends .profileLinks a:link{
color:#0000FF;
text-decoration:none;
background: transparent;
}
#trends .profileLinks a:visited {
text-decoration: none;
color: #0000FF;
background: transparent;
}
And here is the Html Code
<div id="trends">
<h1> Trends... </h1>
<img src="logo.png" alt="Profile Image" height="59" width="68">
<a class="profileLinks" href="#" title="User's Profile Name"> Mark Fonacier </a>
<a class= "commentLinks" onClick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><i>Comment</i></a>
<br/>
<p>
PostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPost
</p>
<a onClick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><i>Comment</i></a>
<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
<form method="post" action="">
<textarea name="comments" cols="60" rows="2" placeholder="Enter your comments here..." maxlength="1000">
</textarea>
<input type="submit" value="Submit" />
</form>
</div>
<br/>
This selector,
#trends .profileLinks a:link
will only work for child <a> tags of elements with a class of profileLinks, whereas your <a> are the elements with the class applied to it. Change it like so:
#trends a.profileLinks:link
Same goes for the other rule.
Do you have any other stylesheet overridden to yours?
Try this
#trends .profileLinks a:link {
color:#0000FF !important;
text-decoration:none;
background: transparent;
}
Hey try this one Just defined color to all links. Change the link color to your desire one.