I have this issue of aligning an image with text inside a button. I've managed to do so, but this solution sets an image with text as part of the image instead. Then again if I had to change the text I would need to change the image text. Therefore it's somewhat useless.
As second solution, I've got an image inside the button besides a text which isn't aligned with my image. what could I do to make them fit?
`
Settings
You could create a new css class:
.my-button img
{
vertical-align:middle;
}
Next add this class to your a tag:
<a href="#" class="ui-btn ui-corner-all ui-shadow my-button">
<img alt="logo2" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" height="40" width="40"/>Settings
</a>
Your code modified here: http://jsfiddle.net/jtorrescr/GRzn5/2/
Related
The rollover works on the image itself, changing from one image to another then back again, but the problem is that it the image also changes on each side of the image on rollover where there is blank space.
I know there it can be done better in CSS, but it is a school assignment and must be in javascript. Below is the code in HTML, then what I have for it in CSS
HTML
<script>
imageout=new Image();
imageout.src="Pics/Image1.jpg";
imageover=new Image();
imageover.src="Pics/Image2.jpg";
function image_out(){
document.images['imageout'].src="Pics/Image1.jpg";
}
function image_over(){
document.images['imageout'].src="Pics/Image2.jpg";
}
</script>
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"
onmouseout="image_out();"><img src="Pics/Image1.jpg" class="center"
id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap"></a>
CSS
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
If someone can point out my error or if there is a better way to do this (must be javascript), I would certainly appreciate it!
As I have mentioned in the comment, block level elements will cover the entire row, So remove the class center from your anchor tag and If you want to align the items in middle then change your structure of html like below.
<div class="center">
<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();"onmouseout="image_out();">
<img src="https://www.delecta.co.za/wp-content/uploads/sample.jpg" id="imageout" width="400" height="200" alt="JavaScript rollover. Image swap">
</a>
</div>
DEMO
I need many images to change when mouse hover on a image.Me try one but its change only one image how can i change many images on hover on image.My try fiddle
HTML:
<div id="container">
<div class="fimg"><img height="130px" width="100%" src="a.jpg" alt="" />
</div> <div class="simg">
<img height="130px" width="100%" src="A.jpg" alt="" /><p class="text_over_image" style="font-size:36px;">TEXT</p>
</div>
Javascript:
$(function(){
$("#container").hover(function(){
$("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
}, function() {
$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
});
});
If I correctly understand your problem, you want an image slider when you hover on the container.
The images are in inline-block are they are set to white-space: nowrap. So, that they don't wrap. container is set to overflow: hidden, it hides the extra images.
The images are shown by animating the margin-left of the inner div. So, it is like the inner container is moving but the container stays still.
You can modify it however you like, vertical animation, using css transitions and stuff.
I cannot post the code here because of the shortened url of the images.
You can test and modify it here, it's a pen.
I have the following page: http://jsfiddle.net/ybv4jd9d/
HTML:
<div class="box hidOverflow marginCenter">
<div class="caption setLeft">
<h3>This is Image One</h3>
<p>This is a description or a start to the image one article...</p>
</div>
<img src="http://pagesbyz.com/n4n/theImages/banner.jpg" />
</div>
If the output pane is made smaller in the jsfiddle link, the text shows up and doesn't stay hidden.
How can I use z-index to make it go under the image so it doesn't show up and stays hidden.
JSFiddle: http://jsfiddle.net/0vwm1vq0/
.box { overflow:hidden; } Will make the text invisible if it falls outside your image.
If you want the text to always be readable [within the grey area] you will need to use media queries to decrease the font size dynamically.
When I'm adding an overflow to the box-div, the text hides itself when making the page smaller.
So following is the solution to your problem:
.box {overflow:hidden;}
</img>
I want it to have onhover a text on it like for example edit this picture.
I thought of backgroung image on css but this is not possible as I call the image from mysql and store the location in a $_SESSION as you can see.
I'd appreciate any help.
EG. http://tympanus.net/crop1.1/ if you hover over the image, a pencil will appear. Instead of pencil, I want text to appear
This can easily be done using css positioning:
(1) create a div tag to function as a container for both the image and the text. Add a p tag around your text.
(2) add position:relative to the div you just created:
#div-name {
position: relative;
}
(3) add a new style for the text that positions it relative to the div:
#div-name p {
position: absolute;
width: 168px;
left: 10px;
bottom: 10px;
background-color: #AAA;
}
You should now have a caption on your picture. I leave the styling up to you, and you may want to consider using JQuery to make your edit tag appear on hover.
Place a title="The text you want" attribute on the <img/>.
<a href="xxx.php" ><img src="<?php echo $_SESSION['picture'] ?>" id="ppicture" title="Your text" /></a>
Alternatively, you could use JavaScript to have a stylized tooltip appear. If you'd prefer this route, I'd recommend jQuery and the qTip plug-in.
Couldn't you just use the title attribute?
<img ... title="Edit This Picture" />
I'm not sure I fully understand your question but perhaps this is what you are looking for.
Using the title attribute of the img tag you can have hover text
</img>
I need your help. I need to highlight image just by dotted line on tab change means through tab when i will reach on that image it should be highlight.
I have code like:
<td><img src="../images/sign-in-btn.jpg" alt="" width="78" height="25" /></td>
it is a image which is solving the purpose of button. When use tab it is not highlighting this image. So i need help for this.
Waiting for early response.
Thanks in Advance:
Tanu
You can achieve this with jQuery, put this line when you reach the img tab
jQuery("#imgId").animate( { backgroundColor: '#65A6D1' }, 500).animate( { backgroundColor: 'white' }, 1000);
If you just want your image to behave like a standard button when focused, showing the same dotted border, you just need to set the .tabIndex property on it:
<td>
<a href="javascript:doSubmit();">
<img src="../images/sign-in-btn.jpg" tabindex="0" alt="" width="78" height="25" />
</a></td>
OK, I found another way. Instead of an img element, try using an input element which type is "image":<td>
<a href="javascript:doSubmit();">
<input type="image" src="../images/sign-in-btn.jpg" alt="" width="78" height="25" />
</a></td>
These input elements normally behave like buttons when clicked or focused.