<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;}
Related
I've been trying to change the size of the image on my button.
Think of it like this: I have a button with an image on it, and it's currently way too big. I've tried scaling it down as such:
<img src = "Button.jpg" height: "50%"; width: "20%"> and this doesn't work, no matter what I put in as the height and width.
Even changing it to 20px and 50px doesn't do anything. I'd prefer not having to create a class because I don't know how to navigate button classes and I'm pretty sure there's a way just to do it like how I'm doing it now.
Also, it's not actually a button, it's part of a list.
<li><a href="https://www.google.com/" target="_blank">
(That's also another issue.)
OK NEW CODE FOR THE BUTTON WITH A CLASS:
<li><button class = "test"></button></li>
</ul>
And for my CSS:
.test{
background-image: "instaButton.jpg";
height: 100px;
width: 100px;
}
You should apply custom height and width to the image, not to the button.
If you resize the button, the button size will change, but the image will go out of its boundaries. If you use this option, you can set overflow:hidden; to the button, but your image will get cropped.
If you resize the image, the image WILL be resized, and the button will resize respectively to the image.
Run the following snippet for examples:
button {
padding: 5px;
background: #d95753;
border: 0;
}
.btn-size {
width: 30px;
height: 30px;
}
.img-size img {
width: 30px;
height: 30px;
}
<h1>
Initial styling:
</h1>
<button>
<img src="http://via.placeholder.com/350x150" />
</button>
<h1>
If you resize the button:
</h1>
<p>
the button size will change, but the image will go out of its boundaries. If you use this option, you can set overflow:hidden; to the button, but your image will get cropped.
</p>
<button class="btn-size">
<img src="http://via.placeholder.com/350x150" />
</button>
<h1>
If you resize the image:
</h1>
<p>
the image WILL be resized, and the button will resize respectively to the image.
</p>
<button class="img-size">
<img src="http://via.placeholder.com/350x150" />
</button>
You need to link to a css file in the header. in the css file you can then say: .class and then you can change the shit. So in the html file, you first should add a class to the button so that the css knows where you're talking about.
Your code should look something like this:
<img src="Button.jpg" height="50%" width="20%">
I think you have a wrong html syntax :)
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');
}
When I try to assign a height to my <div> that contains an <img>, it’s not modified, just moved.
.banner #dornierenvoj {
left:-95px;
bottom:-90px;
height:-100px;!important
position: absolute;
}
<div id="mapplane">
<img src="templates/protostar/images/planeminiature.png" />
<div id="dornierenvoj">
<img src="templates/protostar/images/dornierenvoj.png" />
</div>
</div>
First there is no negative height or width in css !
Second U can use this code to give that image height :
.banner #dornierenvoj img {
height:100px;
}
That's because the css points to the div, not the image.
you have 2 options:
1: add a class to the image
.bannerImage {height:30px;}
<img class="bannerImage" src="pic.png">
define it in the css
#dornierenvoj img {height:30px}
<div id="dornierenvoj"><img src="pic.png"></div>
the code inside the {} will work on all images inside the div dornierenvoj.
use this :
<img src=""templates/protostar/images/planeminiature.png" width="400" height="400">
THIS IS AN EXAMPLE of width and height
I have the following setup
<div id="outerDiv" style="width:100%;">
<div id="innerDiv">
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
The width of the outerDiv can change based on browser view-port. Is there a way to restrict the width on the innerDiv just by using a style attribute, such that it overrides the included image width (800 in this example). Currently the image spans beyond the viewport and I would like the div/browser to shrink the image to the inner-div-size.
Am looking for something like:
<div id="outerDiv" style="width:100%;">
<div id="innerDiv" style="attribute:xxx;" or something similar>
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
Please note that : the innerDiv is rendering 'variable' data coming from a stored parameter for instance. I only have control on the style on the innerDiv to make sure that things like 'center' or 'width' on the innerHtml does not go beyond what the outerDiv is setting. I have tried to use 'max-width' on the outer-div, but that didn't seem to work (I am not an expert on html/css - so I could have done it incorrectly).
Many thanks for all your help !
max-width property can help you.
Remove width attribute from img tag and write additional css code:
<style>
#innerDiv { text-align: center; width: 800px; }
#innerDiv a > img { display: inline-block; max-width: 100%; }
</style>
ComFreak has the complete answer.
Remove the center tag and instead add some css. Also add an id to that image if you want to target only that image specifically as far as its size.
#innerDiv {
max-width:800px;
margin:0 auto;}
img {/*use 'img#idOfimage' instead of 'img' if you end up adding an id to image */
width:100%;
height:0 auto;}
This should take care of it. You can put the css in a style tag in the header or better yet in a separate css file.
Don't use center tag. It defentinatly is outdated. Instead use margin: 0 auto; That will center the content. And use the max-width property for the innerDiv id. This is a great reference source. http://www.w3schools.com/cssref/pr_dim_max-width.asp
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>