I currently have an info image in a table.
When I hover over the icon it displays the artist description in the tool tip because i have it set up to do so.
<img src='images/info.png' width="20" height="20" title="<?php echo $artist['description']; ?>">
This is my CSS
img[title="<?php echo $artist['description']; ?>"]{
border-radius:50%;
background-color: red;}
It doesnt work. Is there anything I can do?
Related
I want to show status with 0 area as red dot and status with 1 area are green. I used style tag for area. But not color coming on image area. Anybody knows please help me. I am sharing my code below
<html>
<map name="map1" id="_map1">
<?php
foreach ($points as $point)
{
$name=$point->name;
$status=$point->status;
if($status==1){ ?>
<area shape="rect" coords="10,15,18,20" href="<?php echo base_url()?>assets/images/green.jpg" alt="" title="" onmouseover="<?php echo $name; ?>" />
<?php
}
else if($status==0) {?>
<area shape="rect" coords="0,0,50,50" href="<?php echo base_url()?>assets/images/red.jpg" alt="" title="" onmouseover="<?php echo $name; ?>"/>
<?php
}
} ?>
</map>
<img id="map1" src="<?php echo base_url()?>assets/images/rectangle.png" usemap="#map1" border="0" width="800" height="600" alt="" />
</html>
See the example use of <map> Html map tag
The href attribute does not show the image (red or green). It is a hyperlink to the target image. The image displays on the screen is the src file of the <img> tag.
You may need to generate the image dynamically on the server side, or use <canvas> to render the data on the client side.
I would love to remove the Dots as you can see in the image Please Help
The Below is my code
<body>
<h1>Please Check Your Email For Verfication that you are not a Bot :-) </h1>
<a href='hotmail.com' class="icon" ><img src="outlook.png" width="70px" height="70px"/></a><br>;
<img src="Gmail.png" width="70px" height="70px"/><br>;
<img src="yahoo.png" width="70px" height="70px"/><br>;
</body>`
Perhaps removing the semi-colons could help:
<body>
<h1>Please Check Your Email For Verfication that you are not a Bot :-) </h1>
<a href='hotmail.com' class="icon" ><img src="outlook.png" width="70px" height="70px"/></a><br>
<img src="Gmail.png" width="70px" height="70px"/><br>
<img src="yahoo.png" width="70px" height="70px"/><br>
</body>
No need for the semicolons at the end of your lines, see below:
<body>
<h1>Please Check Your Email For Verfication that you are not a Bot :-)</h1>
<a href='hotmail.com' class="icon" ><img src="outlook.png" width="70px" height="70px"/></a><br>
<img src="Gmail.png" width="70px" height="70px"/><br>
<img src="yahoo.png" width="70px" height="70px"/><br>
</body>
If you'd like to review HTML syntax, this site is a great resource: HTML5 Syntax
So you have a few issues that are causing extra symbols to appear, and the links won't work as you'd expect.
The semi-colons are showing up because you have semi-colons after each <br/> which don't need to be there.
The underscores after each image are appearing because the images are nested in anchor tags. Anchor tags by default have an underline text decoration, and images have a small bit of extra sizing in most cases.
In anchor tags on almost all webservers, if you don't define a protocol (like http://) to use, then it will send the user to http://yoursite.com/<current_page>/<clicked_link> rather than the external website that you'd expect.
Using these should fix all of that:
HTML
<body>
<h1>Please Check Your Email For Verfication that you are not a Bot :-) </h1>
<a href="http://hotmail.com" class="icon" ><img src="outlook.png" width="70px" height="70px"/></a><br>
<img src="Gmail.png" width="70px" height="70px"/><br>
<img src="yahoo.png" width="70px" height="70px"/><br>
</body>
CSS
.icon {
text-decoration: none;
}
If I have an image in an anchor, how can I make the title of the anchor appear, and not that of the image element?
I know I could remove the title attribute with javascript, but I'm hoping there is a simpler solution.
For example
<a title="Anchor Title"><img title="Image Title" /></a>
If you hover over the link, it will display "Image Title".
What I've Tried
With CSS, I thought maybe I could change the z-indexes to push the anchor to the front, or maybe I could display the anchor as a block and give it the width and height of the image. This did not work. See JSFiddle here.
I was hoping to find a solution with CSS or maybe HTML.
The reason I want to do this is is that I'm working with Wordpress, spitting out posts and thumbnails. I want the thumbnails to link to a certain page, and I want to have a universal title for the link, but it is taking the title from the individual thumbnails. Here's the Wordpress/PHP code:
<a href="<?php the_permalink(); ?>" title="Click to see Featured Stories">
<?php the_post_thumbnail(); ?>
</a>
Pass an empty string in the title attribute in the $attr array in the thumbnail:
<?php the_post_thumbnail('thumbnail', array('title' => '')); ?>
This offers a general solution, disregarding WordPress. CSS prevents the title to show up.
HTML:
<a title="Anchor Title">
<img title="Image Title" src="http://codepen.io/images/logo.png" />
</a>
With CSS:
a {
display: inline-block;
}
img {
pointer-events: none;
}
Result
See CodePen example
Just put a transparent <span> over the image, with transparent background and desired title attribute.
Markup
<a href="#">
<img title="Image Title" />
<span title="Div Title"></span>
</a>
CSS
img { width:50px;height:50px;background:blue; }
a, img { position:absolute; }
a { z-index:4;display:block;width:50px;height:50px; }
img { z-index:2; }
span{
top:0;
left:0;
position:absolute;
width:50px;
height:50px;
display:block;
z-index:100;
background-color:transparent;
}
I just forked your fiddle, works in Chrome at least.
I think removing the img title attribute is the simplest solution of all.
http://jsfiddle.net/hnmuj/
CSS:
#foo {
position:relative;
display:block;
}
#foo span {
position:absolute;
width:100%;
height:100%;
z-index:1;
top:0;
left:0;
display:block;
}
HTML:
<a title="Anchor Title" id="foo">
<span></span>
<img title="Image Title" />
</a>
i have a set of images that i want to show where they are saved into my database as linked, where each images has its thumbs, now i have used limit inquery to show a small number of images where the user needs to go next to show the other, my question is that how can i arrange those images where 4 images in a row and 3 columns
HTML:
<div id="image_container">
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
...
</div>
CSS:
#image_container { width:440px; overflow:hidden; }
#image_container img { width:100px; margin:5px; float:left; display:inline; }
You may need to adjust the sizes; this is the general concept though.
If the images all have the same width then make the container only wide enough for 4 images and float the images left
Otherwise loop through the images and use the modulus operator to test for which image in the row you are on. If you are on an image that should be the first in the row you can clear the floats on that image.
how to insert this javascript code :
thejavascript
inside img src in php
<img src="http:'.$iv[$j].'.jpg" height="220" width="200" alt="Image '.ucwords($kw).'" "thejavascript">
Thanks
You can use this jQuery script to add and onClick event in your balise img but you must adding an attribute id into your image. An id must be unique in your html page.
$("img#idImage").click(function({
window.open('welcome.html','welcome');
}));
$kw = $ucwords($kw);
"<img id='idImage' src='http:{$iv[$j]}.jpg' height='220' width='200' alt='Image {$kw}' />";
But the best will be to separate attributes height and width into a CSS stylesheet.
Insert the following HTML outside PHP brackets and it should work according to the way you posted it. I'm making a few assumptions, one being that the link you posted wraps the image code and that the PHP variables turn the image into valid code.
<a href="javascript:void(0);" onclick="window.open('welcome.html','welcome')">
<img src="http:<?=$iv[$j]; ?>.jpg" height="220" width="200" alt="Image <?=ucwords($kw); ?>">
</a>
More simple, replace "thejavascript" (with the "") by :
onclick="window.open(\'welcome.html\',\'welcome\')"
A bit different approach, onclick event is on img tag.
$javascript="window.open('welcome.html','welcome')";
$img='<img src="http:'.$iv[$j].'.jpg" height="220" width="200" onclick="'.$javascript.'">';
echo $img;