How to change the Text on the image? - html

Below is the image, where I have text on the image. I am wondering on how the text on the Image can be changed. Actually someone else wrote the code and I am not getting. Please Help me out Friends.
And this is the code which is working on this.
<div class="TabsV">
<div id="Tab0" class="TabV Selected" style="height: 86px;">
<a style="background-position: -8px -12px; padding-bottom: 70px;" href="javascript: SelectTab(0)"></a>
</div>
<div id="Tab1" class="TabV" style="height: 116px;">
<a style="background-position: -40px 0px; padding-bottom: 100px;" href="javascript: SelectTab(1)"></a>
</div>
<div class="TabVEmpty" style="height: 50px;"></div>
</div>

It looks like the text is part of the image.
So you need to edit the actual images and change the text there.
If you look at the stylesheet used in that page you will find something similar to
.TabV a{
/*in here you will see the url of the image being used
background:...
or background-image: url('..');
*/
}

It looks like the image itself contains text and it is applied via the TabV class - notice how the background-position coordinates changes between one tab and the other.
If you look in your CSS file, you should see something like:
.TabV
{
background-image: url(...)
}
What you need to do, therefore, is to manipulate the existing image used as background and add the text you want to that image. Then you need to modify the background-position of the corresponding anchor element. One way to do that with jQuery is:
$('#Tab0').attr("background-position","-16px 20px;"); //-16px and 20px are just an example
Where #Tab0 is the css selector for the first tab. #Tab1 would be the css selector for the second tab... "#<something>" maps to id="<something>" in the html markup.
The technique itself is called CSS sprites. You can read more about this technique here.

You can not! You must edit those image files in an image editor. The text from the tabs isn't coded in the html code.

Related

Hover over image to produce another image on top without affecting image below using background-image

I want an effect where when a user hovers over a certain book image (see below), a checkmark box will pop up to indicate that it will be selected upon clicking. Eventually, I want a person to be able to press alt (cmd on mac) to select multiple books.
Here is the HTML:
<div class="container">
<div class="wrapper">
<div class="upload_div">
<div class="upld_div1">
<ul>
<li>
<div class="book_div"></div>
<div class="book_shdw"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
Here is the current CSS:
.book_div {
background-image:url(../img/book_img.png);
background-size: 67.9px 105px;
border:1px solid #bfc1c4;
width:67.9px;
height:105px;
text-align:center;
margin: auto;
}
.book_div:hover{
cursor:pointer;
background-image: url(../img/book_img.png),
url(../img/check.png);
background-position: relative;
}
I can't for my life figure out how to get another image to go on top of the other upon hover. There are a lot of explanations on SO and other forums on how to get a HTML to combine with a CSS background-image as well as how to change one image into another, but not many explanations on how to get one on the other. Please also note that the check.png should be placed in the top right corner so that it's outside of the div. Please offer any insight! Thanks.
EDIT:
Thanks for the prompt reply Mathias, that was a little typo. I implemented multiple bg-images in the .book_div:hover css but was still unable. When I do that, the cursor changes upon hover, but the second image does not pop up at all. (I've edited the syntax now and will edit these notes in)
You should put the top image first when you declare multiple background images.
I find this article great for explaining the stacking order of background images: http://css-tricks.com/stacking-order-of-multiple-backgrounds/
Hope this helps!
DEMO
.book_div:hover{
cursor:pointer;
background-image: url(./top_image.png), url(./bottom_image.svg);
}

Show a gif image over a section to take up the space

I am a total newbie at CSS. The problem I have is really simple.
<section>
<fieldset>
<div>
This div block contains the label field and the files.
</div>
</fieldset>
</section>
This is a part of my HTML code. Inside the div block I have a field and some script that helps me in uploading multiple files. What I want to do is show something like a grey-div-block over the section or div itself that takes up the space and shows a gif image while the files are being uploaded.
The problem: I don't know how to work out with css. I am looking only for some css classes that I can add to my code and do what I want. I know how to fix the jquery.
Use html like this
<div class="load">
<img src="../path">
</div>
And the css is
.load{background-color: Gray; filter: alpha(opacity=80); opacity: 0.8; z-index: 10000; text-align:center; position:absolute;}
may it will help you
just insert wherever you want it placed.
<div class="loading">
<img src="loading.gif">
</div>
EDITED:demo with gif , here when you click on the button the popup appears and when you click on gray backgrond the popup dissappears.
Include your gif inside the div popup and ofcourse style it according to your needs , this will display a centered loading gif , use display:none to both the divs initially and then using some jquery try to make them visible , I hope it helps you
If I understand you correctly, you want something like a modal popup, but just over that section (not the whole page), showing progress image and preventing further clicks on the upload field? If so, then just use this:
<section>
<div id="modal" style="display: none"><img src="..."></div>
<fieldset>
<div>
This div block contains the label field and the files.
</div>
</fieldset>
</section>
You show it with:
document.getElementById('modal').setAttribute('style', 'height: 100%; width: 100%; z-index: 1000; background-color: Gray; opacity: 0.5');
And hide it again with:
document.getElementById('modal').setAttribute('style', 'display: none');

Embed image in a <button> element

I'm trying to display a png image on a <button> element in HTML.
The button is the same size as the image, and the image is shown but for some reason not in the center - so it's impossible to see it all.
In other words it seems like the top right corner of the image is located at the center of the button and not at the top right corner of the button.
This is the HTML code:
<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>
Update:
What actually happens, I think, is a margin problem. I get a two pixel margin, so the background image is going out of the button. The button and the image are the same size, which is only 20px, so it's very noticable... I tried margin:0, padding:0, but it didn't help...
You could use input type image.
<input type="image" src="http://example.com/path/to/image.png" />
It works as a button and can have the event handlers attached to it.
Alternatively, you can use css to style your button with a background image, and set the borders, margins and the like appropriately.
<button style="background: url(myimage.png)" ... />
If the image is a piece of semantic data (like a profile picture, for example), then use an <img> element inside your <button> and use CSS to resize the <img>. If the image is just a way to make a button visually pleasing, use CSS background-image to style the <button> (and don't use an <img>).
Demo: http://jsfiddle.net/ThinkingStiff/V5Xqr/
HTML:
<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>
CSS:
button {
display: inline-block;
height: 134px;
padding: 0;
margin: 0;
vertical-align: top;
width: 104px;
}
#close-image img {
display: block;
height: 130px;
width: 100px;
}
#close-CSS {
background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
background-size: 100px 130px;
height: 134px;
width: 104px;
}
Output:
The simplest way to put an image into a button:
<button onclick="myFunction()"><img src="your image path here.png"></button>
This will automatically resize the button to the size of the image.
try this
<input type="button" style="background-image:url('your_url')"/>
Why don't you use an image with an onclick attribute?
For example:
<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>
Add new folder with name of Images in your project. Put some images into Images folder. Then it will work fine.
<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">
The topic is 'Embed image in a button element', and the question using plain HTML. I do this using the span tag in the same way that glyphicons are used in bootstrap. My image is 16 x 16px and can be any format.
Here's the plain HTML that answers the question:
<button type="button"><span><img src="images/xxx.png" /></span> Click Me</button>
Try like this format and use "width" attribute to manage the image size, it is simple. JavaScript can be implemented in element too.
<button><img src=""></button>
General Answer:
<button style="background: url('icons/close.png'); background-size:cover"></button>
Since currently selected answer has some issues, posting this answer to save people trouble.
Make sure to give your button the width/height necessary to see your image as well as possible adding a "background-position" attribute to make your image show up as intended.
REACT VERSION:
<button style={{backgroundImage: "url('icons/close.png')"}}></button>
To use Image as button create a button download button image and than open it in paint and note down the top left and right bottom coordinates
`<Img src =" button.jpg" usemap=" #button" >.
<map name = " # button " >.
<area shape ="rect" coords = " Top- left , bottom right "
href = " page you want to open by button" > `
You can use multiple< area> tag to create different button from just one image .
Note : There is one issue with this method that if you try to change the height and width of the image the pixels shift and your button won't work
For that change the button image size externally by photoshop or any other photo editor
That's it you have created your button without java script and with few lines of code
Buttons don't directly support images. Moreover the way you're doing is for links ()
Images are added over buttons using the BACKGROUND-IMAGE property in style
you can also specify the repeats and other properties using tag
For example: a basic image added to a button would have this code:
<button style="background-image:url(myImage.png)">
Peace

HTML div with a background

I'm making a website (Although I know nothing about HTML & Photoshop).
Its quite a challenge for me and I'm pretty happy with what I got so far.
Now I want to make boxes / floating squares on the site.
So I wanted to do this by using a the div but I have no clue how :#
<div id="div1" style="background-image: url(../bg_content_middle.png);height: 129px">
HELLO IS THIS A BOX?
</div>
I have this in my style.css:
#div1 {Background: url("bg_content_middle.png");}
bg_content_middle.png is a 1 pixel high "bar" which I want between top and bottom.
And thats not even working :(
Please help me.
You're mixing in-line CSS with external CSS rules. The inline style with ../bg_content_middle.png is overriding the other background image url of bg_content_middle.png. You only need to define it once.
In this case you could go for a pure CSS solution:
<div id="div1">HELLO I AM A BOX ^_^</div>
#div1 {
background-color: #900;
border: #f33 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Please don't number your divs though, call them something relevant like <div id="content">.
Hope that helps
1) Make the B in background lower-case
2) Is the image in the same directory as style.css? If not, you'll have to link to the correct directory.
well, if all you want your div to have a backround, you can have something as simple as this example from this tutorial:
<body>
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
</div>
</body>
First of all, you only need to define this particular style once, but inline styles (styles within the tag's <style> attribute.) take precedence. You should remove the inline style in this case, since it's redundant and double check your image paths just in case. Remember that css paths can be document relative, in which case they refer to the location of the css file, and are not relative to the HTML page.
If it's one pixel high you might want to set the repeat property as well. put this in the element's CSS:
background-repeat: repeat-y;
And set a width equivalent to the image width.
You need to set the position : absolute in your css. From there you can use top, left and height to position and size your tags

Change Link Image when active

I have 3 links that represent the content for one iFrame in my page. When you click each link, it'll reload the contents of that iFrame without reloading the page.
how do i set the image of my link to change when it's active?
here's my code:
<div id="tabs">
<div id="overview">
<a id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>
<div id="tabs-1">
<!--<div id="scroller">-->
<iframe name= "tabsa" width="95%" height="100%" frameborder="0"></iframe>
</div>
CSS code:
#gallery a {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/GalleryTab.png) no-repeat;
height: 51px; width: 123px; position: absolute; z-index: 2;
}
#gallery a:active, a:hover {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/galleryoverview.png) no-repeat;
height: 51px;
width: 123px;
position: absolute;
z-index: 2;
}
it doesn't seem to work.. :o i only see the change in image when i hold the mouse down on the link, but when i click it, the image remains the same as if it wasn't the active tab. :o thanks!!
I am not seeing a style for visited? Only active and hover.
add
#gallery a:visited{}
style and see if that helps.
But I wonder if that is what you are actually asking? You may want to link to be displayed differently from the other links if its the last link that the user clicked. To do that you may have to use some javascript.
For example, if you use jQuery you can do something like this:
$("#gallery a").click(function(){
$("#gallery a").removeClass("ActiveClass");
$(this).addClass("ActiveClass");
});
where ActiveClass is a CSS class for styling the link appropriately.
EDIT based on comment below.
Let us assume that you have three links that look the same (call that lookA). You click on one and it looks different from the other two (lookB) but the other two still looks the same (lookA). You then click on a second link. The second link is not lookB and the other two links are lookA. Does this sound like what you want? At least that is how I interpret your question.
Hence, create two classes in CSS:
.lookA {/*Style for lookA*/}
.lookB {/*Style for lookB*/}
of course you can use more meaningful names.
Then you can add a class to each of the links that you need to use in this scenario like this:
<div id="tabs">
<div id="overview">
<a class="imagelink lookA" id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a class="imagelink lookA" target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a class="imagelink lookA" target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>
So that each link can be refered to by its class, that is, imagelink. Also each link has a default lookA.
Now in jQuery (I know you did not specify jQuery but using it is 100 times simpler than plain Javascript).:
$(document).ready(function(){
$(".imagelink").click(function(){
$(".imagelink").removeClass("lookB");
$(this).addClass("lookB");
return true;
});
});
So on click on the link, it removes lookB from any other link and applies it only to the clicked link.
Hope this helps a bit.
I believe the selector is:
#gallery a:focus {...}
This is (inevitably) applied variably across browsers, however.
Stu Nicholls has a demo over on CSS Play, this demo being to remove the default outline of the focussed element, and otherwise style the clicked element.
Presumably this would be more reliably effected with jQuery, but it can be done with CSS.