I have code like this
<tr>
<td>
<img id="one" src="abc.jpg">
</td>
<td>
<img id="two" src="xyz.jpg">
</td>
<td>
<img id="three" src="def.jpg">
</td>
</tr>
Initially I want to display all the three images
But when I hover on image one image two and three should be hidden
how to do that?
Give your <tr> a class. Then hide the images when the row is hovered, but show the image that is being hovered:
.imgRow:hover img {
opacity: 0;
}
.imgRow:hover img:hover {
opacity: 1;
}
jsfiddle.net/J7wHq
Demo with a nice transition effect and some old IE support: jsfiddle.net/J7wHq/2
It is my understand that what you are trying to do is not possible with just CSS
http://jsfiddle.net/87zh6/
#id1:hover + #id2
{
//Whatever you put here will modify #id2 when #id1 is hovered.
}
However you can only modify the element directly following #id1. If #id2 is not the next element in code it will not work.
This is why in the jsfiddle i provided it will hide the second image but not the third.
I would suggest using a form of Javascript to accomplish the task.
As far as I know this isn't possible with just CSS. I recommend using jQuery. It is super easy to learn and it will really make your life easier. I suggest using the W3 Tutorials.
As for your problem, you'll need to give id's to each <td> element and use jQuery's .hover() method:
$("#one").hover(function() {
$("#two, #three").toggle();
});
That will hide/show images two and three when you move the mouse over image one. If you want to just hide the images (and not toggle) you can use:
$("#two, #three").hide();
Working JSFiddle: http://jsfiddle.net/7gUL4/
Yes use jquery:
<script src=" <!-- you can put jqueries code URL in hear go to code.jquery.com copy paste url --> ">
</script> <!-- that loads jquery's stuff -->
<script>
$("#one").hover(function(){
$("img').hide();
});
<!-- repeat for others -->
</script>
Related
I am trying to build an email template in which i have to show some images to different mail client (eg.. outlook, thunderbird...). Now problem is when these clients does not allow to show image at that time broken image box is displaying which i don't want to display.
I had also refer
Refered link 1: How to remove borders around broken images in webkit?
Refered link [2]: input type="image" shows unwanted border in Chrome and broken link in IE7
Refered link [3]: How to stop broken images showing
but not able to find any proper output.
Note : I can not use div tag. I must have to use table tags.
CODE What I am using :
<table style="background:#fff; width:600px; margin:auto auto;">
<tr>
<td>
<a href="http://www.sampleurl.com">
<img src="http://sampleimageurl.com/sampleimage.png" height="55" width="198" />
</a>
</td>
<td style="text-align:right;"><a href="http://www.sampleurl.com" target="_blank">
<span style="font-family:Myriad Pro; color:#0d5497; font-size:20px;">www.sampleurl.com</span>
</td>
</tr>
<!--<tr>
<td colspan="2" style="height:1px; background: #0d5497;"></td>
</tr>-->
OUTPUT what i get.
use alt here for fallback
demo
html
<img src="abc" alt="image" />
css
img {
width:200px;
height:200px;
}
Alternatively, if you dont want to show any alt text, just give a blank space.
demo here
HTML
<img src="abc" alt=" " />
I know I'm late to the party but I didn't see a simple solution that used native javascript. Here is the solution I came up with
<img src="https://test.com/broken-image.gif" onerror="arguments[0].currentTarget.style.display='none'">
onerror calls a function, passing an error event as an argument. Because the argument is not actually defined as 'error' we need to get it from the arguments array that all functions have. Once we have the error we can get the currentTarget, our img tag, and sent the display to none.
I think you can use on error event on img.
here is a simple solution
Please pay attention that this script uses onDomReady event. In this case you should write:
<script type="text/javascript">//<![CDATA[
$(function(){
$('img').on('error', function () {
$(this).remove();
})
});//]]>
</script>
UPDATE
Why do you load images ? You can attach this image to email and show it via CID
You could any other element instead of and IMG and set the background-image using CSS. If that image is not found, you will not get the strange looking box.
<span style="background-image:url('http://sampleimageurl.com/sampleimage.png'); display:inline-block; width:198px; height:55px">
element with background
</span>
Sounds like a tough call not being allowed to use ALT text
If whoever is making this decision is convinced by a bit of styling you can do that e.g.
<img src="logo.jpg" width="400" height=”149″ alt="Company Name" style="font-family: Georgia; color: #697c52; font-style: italic; font-size: 30px; background:#ccffcc">
see http://jsbin.com/IcIVubU/1/
use this code block in your mail content to keep unrendered image as hidden.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<img id="imgctrl" src="imgs/sandeep11.png" onerror="$('#' + this.id).hide();" alt="Alternate Text" />
concept is.. use any CDN jquery reference then only jquery code will work. and I guess your src image path also should be some live url. if not then, it should be in attachment.
Please Click on "Show Remote content" to get remote urls into
thunderbird. this is security constraint of thunderbird. that's why
your images are not being loaded.
I know it is an old question but I found I had this problem too today (08 January 2020) and found a way to get around it.
I tested with the latest versions of Firefox and Chrome, I still could not find a solution for Safari.
Firefox:
For firefox you must add alt=" " note the space
Chrome:
For Chrome it must be alt="" note the empty space
The problem is that when I add the space the icon shows up on Chrome and disappears on Firefox, and vice versa when I remove it.
I added just a space because I did not want any text showing up on the image.
I did not have to add any of the following lines for it to work (I saw many solutions proposing some or all of them), but I left them in just in case
border: none;
outline: none;
border-image: none;
From there I guess it would be detecting a the browser in JavaScript and changing the alt attribut to " " or "".
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('img').forEach(function(img){
img.onerror =function(){this.parentNode.removeChild(this);
})});
DEMO
you can remove img by javascript:
arr = document.getElementsByTagName("img");
for(i=0; i<arr.length; i++){
if(arr[i].src=="")
arr[i].parentElement.removeChild(arr[i]);
}
I'm using a combination of html and very basic jQuery in order to make an img that functions like a button so that when the img is clicked, the src of the image (src1) changes to another src (src2, that being the image of the button having been pushed down).
I'm trying to make it so that if that same image (now src2) is clicked, then it changes back to the original src (src1).
I hope that wasn't a headache to understand, and I can clarify if needed.
Here's what I have for code:
<!--Html-->
<body>
<img id="pixelbutton" src="images/pixelbutton.png" onClick="pixelbuttonclick()" />
</body>
/* jQuery */
function pixelbuttonclick() {
var pixelbutton = document.getElementById("pixelbutton");
if (pixelbutton.style.src=="images/pixelbutton.png") {
document.getElementById("pixelbutton").src="images/pixelbutton_press.png";
}
else if (pixelbutton.style.src=="images/pixelbutton_press.png") {
document.getElementById("pixelbutton").src="images/pixelbutton.png";
}
}
I'm a huge noob, so less complicated answers, if possible, are appreciated.
I recommend to place your function in head section for consistency if you haven't.
Your "pixelbutton.style.src" was wrong since the src is an attribute and not in css, but manipulating URL is rather difficult. I agree with Amareswar's answer to use background image in css.
Another way I did this is using the jQuery code:
<script type="text/javascript">
$(document).ready(function(){
$("#pixelbutton").click(function(){
$("#pixelbutton").css({'display':'none'})
$("#pixelbutton2").css({'display':'block'});
})
$("#pixelbutton2").click(function(){
$("#pixelbutton2").css({'display':'none'})
$("#pixelbutton").css({'display':'block'});
})
})
</script>
and modifying your body code:
<img id="pixelbutton" src="images/pixelbutton.png" />
<img id="pixelbutton2" src="images/pixelbutton_press.png" style="display: none;" />
Instead of repalcing URL can use a div with background-image css property and set another class on click of the div with another image as background image
What elements allow link?
I want to wrap a link around a table,
<a href="123.php" class="grap" >
<table border="1" style="width:600px; height:600px;">
<tbody>
<tr>
<td align="center" style="border:1px solid red"><img src="thumb-pic-1.jpg" alt="123"/></td>
</tr>
</tbody>
</table>
</a>
But it is not a correct html as in http://validator.w3.org/
I can put the link in a form like this,
<form action="123.php" class="grap" >
<table border="1" style="width:600px; height:600px;">
<tbody>
<tr>
<td align="center" style="border:1px solid red"><img src="thumb-pic-1.jpg" alt="123"/></td>
</tr>
</tbody>
</table>
</form>
But the link or the table is not meant to be a form form submission...
I wonder if there are anyway to wrap a table in a link?
EDIT:
Sorry forgot the mention that I need to grab the link url like this,
$('.grap').click(function(){
alert($(this).attr('action'));
return false;
});
<a> is an Inline-Element and <table> is a block element. Block elements are not allowed in inline elements in xhtml. But what about a click listener on the table, or an div around the table? The effect should be the same.
This might be also interesting for you:
Is it wrong to change a block element to inline with CSS if it contains another block element?
Browsers let you wrap a table inside a link. The practical problems with it relate to rendering (browsers may or may not underline the text content and draw borders around images inside a link), not with basic functionality. It’s not valid as per HTML 4.01 for example, but so what?
In your example, the table contains just one cell that contains just one image. You could instead use just an img element and style it suitably. In a more complicated case, a table might be useful. Then you should probably set color and text-decoration for it in CSS and border for any img contained in it, so that you get the rendering you prefer and not the varying browser default rendering for a situation like this.
You can not wrap a block level element (such as a table) in an inline element (such as an anchor). You could, however, use display: block; to make the anchor block level.
You could also use Javascript event handlers to link the table. For instance, you could have this snippet of code in your head tag that assigns an onclick event to the table.
Where, idOfYourSpecifiedTable is the id attribute of your table (ie <table id='idOfYourSpecifiedTable'>),
<script type="text/javascript">
document.getElementById('idOfYourSpecifiedTable').onclick = function() {window.location.href='123.php'};
</script>
or in jQuery
<script type="text/javascript">
$(function() {
$('#idOfYourSpecifiedTable').click(function() {window.location.href='123.php';});
});
</script>
Furthermore, you could even use #idOfYourSpecifiedTable {cursor: pointer;} to make the cursor a pointer (hand) when a client hovers over it.
However, this method has its weaknesses. Notably, a search engine robot will likely not detect your table as linked to another page of your site.
I am wondering if there is a way to give the HTML button tag, <button> an image so the image is click-able on my webpage. That way when users click on the image I can have other things happen
This doesn't seem to be working, and was wondering if it is even possible
HTML code -
<button>
<img src="images/dagger.png" width="10%" height="10%" id="dagger" />
</button>
Not quite sure what you are trying to achieve but maybe this example helps.
HTML
<button>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" id="dagger" />
</button>
JavaScript
$(function(){
$("#dagger").click(function(){
alert("click");
});
});
You could set the image as button background
button {
background-image:url('images/dagger.png');
}
I was having similar issues, and thought I would drop this post for anyone in the future that sees this thread.
From my understanding, you're not wanting a BUTTON, but a clickable image that acts as a button. Here is what I did:
HTML:
<img src="images/dagger.png" width="10%" height="10%" id="dagger" />
JavaScript/jQuery:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#dagger").click(function(){
// what you wanted your button to do when user clicks it
});
</script>
By doing it this way, you get rid of the normal "button" image, and you can use whatever image you want as your clickable button. As well, you get the same functionality that you're wanting from the button, and it opens up many other paths to achieving your purposes.
Hope it helps!
Another method I use is simply putting the onclick event on the img itself to call a function.
html:
<img src="images/dagger.png" width="10%" height="10%" id="dagger" onclick="myFunction()" />
JS:
<script>
myFunction() {
// what I want to happen if user clicks image
}
</script>
Depending upon what you're doing, and what you're trying to manipulate, all of the examples on this page will provide you with better/worse ways of doing it. Using the onclick event within the img tag, you can pass variables/information to the function to utilize, and then have the function relay it to your PHP/ASP/etc.. As well, if you were dealing with a form, you can have your function handle information/submission, rather than the default submission that forms use. Use your imagination with the problems you come across, and decide which method works out better. Never settle for learning just one way of doing something.
Normally you wouldn't use a button you can just bind the click event to the image with JavaScript.
But if you must have a button you can style the button using CSS and the background-image property.
I have a div that is encased in an html <a> tag, so clicking anywhere on that box will lead the user to a new location.
I would like to add one button inside that box that leads somewhere else (a more specific location than the encasing div's link.
At the moment, adding that second <a> tag inside my div closes the original <a>, which makes sense as I guess these tags cannot be nested. How can I accomplish this 'nested' link problem?
Update
I need to build a rel attribute because it toggles an expanding section in the outer div.
My current code:
<a class="toggle" rel="toggle[<%= "#{user.id}" -%>]">
<div>
<a>...</a>
</div>
</a>
<div class="expand_me" id=<%= "{user.id}" -%>>
...
</div>
I've been trying to get the javascript you have suggested to work, but it doesn't. How should I get this specific case to work? I apologize for not including this information at the outset - I didn't know there would be a real difference between getting the solution to work with an href instead of the needed rel.
you could instead add an onClick handler to the div, and could place the link safely inside the div.
<html>
<head>
<script>
function clicked(){
window.location.href="link2";
}
</script>
<style>
body{
width:50%;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<div width="100px" height="100px" style="background-color:red" onclick="javascript:clicked()">
test
</div>
</html>
Not only <A> elements cannot be nested, but (I believe) that the content must be inline, so DIV should not be used for links. I'd use, onclick in the outside DIV, for example:
<div id="myparentdiv" onclick="alert('go somewhere')">
hi bla bla blah
<br> hi <br>
<a onclick="document.getElementById('myparentdiv').onclick=undefined;return true;"
href="http://stackoverflow.com/">go to st</a>
</div>
Obviously, you should replace the alert call with your redirection.
The inside onclick is to avoid the event propagation.
This problem can be solved with jQuery like so:
<div class="linked">
Text
<div class="linked">
Text2
</div>
</div>
<script type="text/javascript">
$("a").each(function(){
var aTag = this;
$(aTag).ancestor('.linked').click(function(){
window.location.href = $(aTag).attr('href');
});
});
</script>
This gives you the best of all worlds: semantic HTML, and the auto propagation of a tag behavior up to the nearest 'linked' ancestor. It also conveniently allows for nesting.
I agree with what the other users suggested. A tag can only be inline elements and therefore cannot wrap any other elements. Solution is to use the onclick event to handle the case where the user will click on the div tag. Inside the div tag then you can put other a tags which can point somewhere else.
This method however has a flaw, that is search engines will not be able to crawl the link wherever the onclick event is pointing. One way to fix this is to have another explicit link on the page which will point to the same link as the onclick. Here is the example:
<div onclick="document.location.href = 'link1.html'">
<p>Content would go here...</p>
Click here or anywhere near me to go location 1
Click here to go to location 2
</div>
NOTE: The first a tag does not have to be inside the div tag.
This will allow users to click either inside the div or on the first a tag to go to link1.html, and the other a tag will go to link2.html. This will also allow search crawlers to index both links.
I would also recommend applying some CSS to the div tag, and wrapping the onclick javascript code into a function to make the code more manageable but that's not necessary.
Hope this helps.
If browser compatibility isn't of utmost importance, then you should have a look at this pure CSS solution. By using an AP anchor and the z-index property, you can have an anchor that's as big as the outer div that is layered on top of all the other contents.
In it's simplest form, it could look something like:
<div id="about_us">
<h3>About Us</h3>
<p>This website is the culmination of several months of intensive research
and collaboration. </p>
<p>We painstakingly gathered data and are presenting it to the world here. </p>
Read More
</div>
CSS:
#about_us {
position: relative;
}
#about_us a {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 100;
text-indent: -9999px;
}
This will give you anchor with the same size as the parent div, and is above all of the contents, as well as hide the link text so that it won't appear at the top left corner of the div.
For a more complex example, see: http://jsfiddle.net/545xy/2/