I am attempting to insert an image into an HTML script? Example: How do I choose the image that is utilized where the parentheses are? Thank you!
class="" is not used to insert images. It's a class name. Therefore:
if you're interested in inserting an image using class than probably it's about a backgroud-image:
HTML
<span class="someClassName"></span>
CSS:
.someClassName{
display: inline-block;
width: 100px;
height: 100px;
background-image: url("pathtoimage.jpg");
}
otherwise you need an <img src="pathtoimage.jpg" alt=""> HTML tag inside your SPAN element
Related
How can I add a tab character to the link text on a URL
i.e. instead of
col1 col2
i have col1 -TAB SPACE HERE- col2
The reason for this, is that Im creating a URL list by concatenating columns, and want to space them out correctly, so the url list looks neat.
Ive tried adding a chr(9) into the gap, as well as but it doesn't work. I also know I can target the link with an a:link {...} but not sure how to use this to get a tab in there.
Any help much appreciated
thx. Richard
There are no Tabs in html. Why don't you use a span inside?
<a href="url">
<span class='column'>col1</span>
<span class='column'>col2</span>
</a>
Then add 'column' to your css:
.column {
width: 50px;
float: left;
}
If you cannot add CSS (you can only modify the text) then you need to add styling inline:
<a href="url">
<span style='width: 50px; float: left;'>col1</span>
<span style='width: 50px; float: left;'>col2</span>
</a>
I have this code
<div class="mix category-1">
<a href="img/holder-01-large.png" class="photo">
<img src="img/holder-01-small.png alt="Ram - Srbija" class="img-small-1"></a>
Primer montaze
<a class="popup-youtube" href="https://www.youtube.com/watch?v=dz1kDQEHJaU">Video primer</a>
</div>
I want to replace this holder-01-small.png when hover over it with image with same dimensions. Is that possible by not touching this HTML code, just using CSS?
Yes it's possible, but not using the approach you have presented.
Instead, create a div (using an img tag here would mean we would need a transparent image to act as a placeholder, whereas a div will just work)
<div class="image"></div>
And in css try something like the below, you will need to specify a height and a width as the div will technically be empty, otherwise it will just collapse on itself.
.image {
background-image: url("path-to-file");
height: xx;
width: yy;
}
.image:hover {
background-image: url("path-to-different-file");
}
This div will then change it's background image.
It's possibly using this HTML, yes. (As long as you insert the missing quote after the src, that is!)
a.photo:hover img {
display: none
}
a.photo:hover::after {
content: url(http://lorempixel.com/100/100);
}
<div class="mix category-1">
<a href="img/holder-01-large.png" class="photo">
<img src="http://lorempixel.com/g/100/100" alt="Ram - Srbija" class="img-small-1" />
</a>
Primer montaze
<a class="popup-youtube" href="https://www.youtube.com/watch?v=dz1kDQEHJaU">Video primer</a>
</div>
Note that I changed the HTML to point to another image on the web in order to show something here in the snippet; hope you don't consider that to be cheating!
if you can place a div instead of an imgtag, you can add the background-imgproperty in css and then a hover. Something like this:
.img-small-1{
background-img: url('..img/holder-01-small.png');
width: 'your image's width';
height: 'your image's height';
}
.img-small-1:hover {
background-img: url('..img/myOtherImage.png');
}
<tr>
<td> <span id="dummy" onclick="playSound(this,'vowels/ear.mp3');">
<img src="pics/ie.jpg" onmouseover="this.src='pics/dipthongs/ear.jpg';this.width=200;this.height=250" onmouseout="this.src='pics/ie.jpg';this.width=100;this.height=150"/>
</span> </td>
My problem is that the images get so big when i load the page. I have to hover to all the images before it returns to the size i declare for them. thanks!
Add a class to the image to fix the width and height parameters.
<img src="/image.png" class="image1" />
Now CSS using min-width/height and max-width/height:
.image1 {
max-width: 500px;
max-height:500px;
min-width: 120px;
min-height: 120px;
}
Create Functions
function mouseEffect(ele,image,className){
ele.src=image;
ele.className= className;
}
Example:
http://jsfiddle.net/mwtjt/
Don't set the width in HTML itself. Use CSS to set the width. Dont set the height it will be properly scaled.
HTML
<img class="styleImage" src="x.jpg">
CSS
img.styleImage {width:75%; -ms-interpolation-mode:bicubic;}
I'd like to wrap an html link tag around both and image and a caption, so something like
<img src="...">Caption Text</img>
The caption should go below the image, but I'm not sure of a good way to do that (adding a <br> works, but seems unclean). I'd like to be able to use a styled element, but I can't put a div inside of there.
Try this - DEMO
No need to change your HTML
<a href="link">
<img src="http://lorempixel.com/200/100" />
Caption Text
</a>
CSS
a {
display: inline-block;
text-align: center;
border: 2px solid orange;
}
img {
display: block;
}
You can wrap the caption inside a span
<img src="..."/><span style="display: block;">Caption Text</span>
http://jsfiddle.net/ZgKqF/
Try it this way : <img src="..." alt="Caption Text" />
Then use javascript to display the alt attribute and display with javascript. Look at this for reference Get the "alt" attribute from an image that resides inside an <a> tag
You can make the a behave like a div (in regard to how it can be styled) with
display: block
How can I place only an image in a div as background image, and add url link to it.
Currenty I'm doing it this way:
<div class="image"><img src="books.png" alt="Test" /></div>
I want to do something like following, but its not working (the image does not appear).
<div class="image"><span class="books"></span></div>
Thanks.
Place the background image in the <a> tag if you want it clickable.
your css:
.image a { display: block;
background: url('image.jpg') no-repeat;
height: 50px; /* obviously use the same dimensions as your image */
width: 50px; /* obviously use the same dimensions as your image */
}
<div class="image"> </div>
or better yet, get rid of the div entirely, and just apply the image class directly to a:
<a class="image" href="example.com"> </a>
It's likely it's because the div is empty. Try something like:
<div class="image"><span class="books"> </span></div>
If it's still not showing, set the "image" class to have a background color too, so that you can see how big the div 'thinks' it is.
If you want an image to be in the background you need to set, the style property "z-index:-1", that way, the image will be in the back of the other elements in the same content div
Does it have to be a DIV?
I am writing the style inside you can use it in css file
<a class="image" style="display:block; width: (image-width); height: (image-height); background: url(image-link)"></a>
this will work...
you can use it like this if you need div..
<div class="image" style="width: (image-width); height: (image-height); background: url(image-link)"></div>