I am creating an html email which uses image buttons as
<input type="image" src="images/right_nav1.bmp" width="200" height="37" name="right_nav1" style="border:0; padding:0; margin:0; display:block;" />
<input type="image" src="images/right_nav2.bmp" width="200" height="37" name="right_nav2" style="border:0; padding:0; margin:0; display:block;" />
<input type="image" src="images/right_nav3.bmp" width="200" height="37" name="right_nav3" style="border:0; padding:0; margin:0; display:block;" />
<input type="image" src="images/right_nav4.bmp" width="200" height="37" name="right_nav4" style="border:0; padding:0; margin:0; display:block;" />
The images are not getting displayed. Is there a work around for displaying image buttons?
Two things:
you need to use absolute paths. The E-Mail has no connection to your web site and its paths. <img src="http://.....">
Don't use BMP images, support is going to be spotty. Use JPG, GIF or PNG images instead.
Related
I am trying to make a floating menu that sticks to the top of the screen and has a few icons you can click, most of which will submit a form. As it stands though, the filechoosebutton is hidden via css, but even though it is not rendering, it still causes my download button to disappear offscreen. How can I fix this?
Thanks for any clues
Here is the html for the menu
<div id='floating_menu'>
<table >
<tr>
<td >
<form action='' method='post' id='trash1' >
<img src='http://s27.postimg.org/jua3mu9q9/trash.jpg' width="35" height="45" alt='delete' />
</form>
</td>
<td >
<img id='storagebutton' src='http://i60.tinypic.com/2igya9d.jpg' width="35" height="45" alt='storage' />
</td>
<td >
<form id="uploadtsvform" enctype="multipart/form-data" method="post" action="">
<input id="filechoosebutton" name="uploadFile" type="file" onchange="this.form.submit()" />
<img id='uploadbutton' onClick='chooseFile()' src='http://oi59.tinypic.com/2lm0yky.jpg' width="35" height="45" alt='upload tsv' />
</form>
</td>
<td >
<img id='downloadbutton' src='http://i62.tinypic.com/zu4n03.jpg' width="35" height="45" alt='download tsv' />
</td>
</tr>
</table>
</div>
Here is the css that creates the floating menu
#floating_menu {
background:white;
width:250px;
height:25px;
position:fixed;
top:10px;
right:0;
}
Here is the css that hides the usual Browse upload button
#filechoosebutton {
height:0px;
width:0px;
overflow:hidden;
}
Here is a Fiddle
You form is eating up the space of the download button. Try adding
#uploadtsvform {
display: inline-block;
width: 50px;
}
I have created one marquee with images as element.
Code is
<marquee behavior="scroll" direction="left" scrollamount="30" class="image-marquee" >
<img src="images/cbr.png" alt="cbr-bike" name="CBR BIKE" style="float:left;" title="CBR BIKE" border="0" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()" />
<img src="images/blank.png" alt="aviator" name="blank" style="float:left; cursor:default;"border="0" />
<img src="images/aviator_.png" alt="cbr-bike" name="AVIATOR" style="float:left;" title="AVIATOR" border="0" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()" />
<img src="images/blank.png" alt="aviator" name="blank" style="float:left; cursor:default;"border="0" />
<img src="images/cbr.png" alt="cbr-bike" name="CBR BIKE" style="float:left;" title="CBR BIKE" border="0" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()" />
<img src="images/blank.png" alt="aviator" name="blank" style="float:left; cursor:default;"border="0" />
<img src="images/aviator_.png" alt="cbr-bike" name="AVIATOR" style="float:left;" title="AVIATOR" border="0" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()" />
<img src="images/blank.png" alt="aviator" name="blank" style="float:left; cursor:default;"border="0" />
</marquee>
CSS
.image-marquee{ }
.image-marquee img{margin-top:70px;cursor:pointer; }
Is it possible to stop the marquee after every image slide and after some time it should run forward to next image?
Try this code
scrolldelay="2000"
scrollamount="500"
While I was trying to style my footer, and checking it in Firefox, i encountered an error that the facebook, etc icons were not showing up. This is the sample footer html code.
<div id="footer">
<div id="footer_content">
<div id="footer_left">
<!-- JP Morgan && Force For Good Signature -->
<div id="jp_right_content_main">
<div id="jp_right_content_inner1">
<font color="#FFFFFF" size="4" font-family="Times New Roman">In Assocaition with:</font> <br /> <img
class="header-photo" width="280" height="70" alt="JPM Logo"
src="images/Logo_JPM.jpg"></img>
<h1 class="header11">
<font color="#ED872D">Force</font> <font color="white">For</font> <font
color="green">Good</font>
</h1>
</div>
<div id="right_content_inner2">
<img src="images/partner_pic.png" width="130" height="130" />
</div>
</div>
</div>
<div id="footer_right">
<a href="http://www.facebook.com/Unitedwaymumbai" target="_new"><img
src="United%20Way%20Mumbai%20--%20about_us_files/facebook.gif"
height="27" width="16"></a><a
href="http://www.youtube.com/unitedwaymumbai" target="_new"><img
src="United%20Way%20Mumbai%20--%20about_us_files/youtube.gif"
height="27" width="34"></a><a
href="http://www.linkedin.com/company/united-way-of-mumbai"
target="_new"><img
src="United%20Way%20Mumbai%20--%20about_us_files/linkdin.gif"
height="27" width="26"></a><a
href="http://twitter.com/mumbaihelpline" target="_new"><img
src="United%20Way%20Mumbai%20--%20about_us_files/tweeter.gif"
height="27" width="32"></a><br>
<p class="text7">
Copyright United Way Mumbai & J.P.MORGAN SERVICS INDIA PVT LTD. All
Rights Reserved. <a href="sitemap.htm"><span class="text8">Sitemap</span>
</a>Page Designing By <a href="http://www.force4g.com"
target="_blank" class="text8">FORCE FOR GOOD | TEAM : T.U.R.C.S</a>.
</p>
<div id="contact_text" class="header5">Contact: 022-24937676 / 79
or Email: contact#unitedwaymumbai.org</div>
</div>
</div>
</div>
And its corresponding css:
#footer{width:100%; height:auto; border:0px solid black; float:left; background:url('../images/footer_bg.gif') repeat-x;}
#footer_content {width:959px; height:auto; margin-left:auto; margin-right:auto; margin-bottom:30px }
#footer_left {width:491px; float:left; margin-top:16px; margin-bottom:25px; }
#footer_right {width:468px; float:left; margin-top:16px; }
#jp_right_content_main { height:159px; width:468px; float:left; margin:0; padding:0; background-image:url(../images/partner_bg.png); background-repeat:no-repeat}
#jp_right_content_inner1 {width:311px; height:127px; margin-left:27px; float:left; margin-top:5px;}
The facebook, twitter etc png images are not showing up.
Any help would be appericiated.
Regards,
Vivek
And the moral of the story is: Make sure your images are linked correctly.
And for future reference, setting things up on sites like JS fiddle not only helps other people troubleshoot your problem, but gives you a chance to redo what you've already done and catch small errors (like this one).
I need to set textbox background image that is clickable so i used div(position:absolute) tag above textbox in which i included image, but the problem is that image is located above text, i tried to set z-index of image to -1 but then image got behind textarea
#smiley {
position:absolute;
z-index:1;
}
<telerik:RadPane ID="Radpane5" runat="server" Height="100%" Scrolling="None" Width="100%">
<div id="smiley">
<img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/1013130_10200305067254687_188481208_n.jpg" alt="Smiley face" height="40" width="40">
</div>
<telerik:RadTextBox ID="chatBox" runat="server" TextMode="MultiLine" Resize="Both" Rows="100" Width="100%"
EmptyMessage="type here" AutoPostBack="true" BorderStyle="None" Style="z-index:5; border: none; margin: 0 auto; outline: none">
</telerik:RadTextBox>
Try this
HTML
<input type="text" id="smiley" />
<input type="text" id="smiley1" />
CSS
#smiley:focus{background: red;}
#smiley1:focus{background: url("http://surrey-arg.org.uk/SARG/08000-TheAnimals/Images/Prey/Small_fish.jpg");}
LINK
I have some HTML where I have img tags inside of an href tag to use as a button. Everything works fine except that when I open it in IE, I get a border around the img tag.
Here's some code:
<img src="button.png" width="25" height="25" style="margin-top:600px;" />
<img src="button.png" width="25" height="25" style="margin-top:600px;" />
<img src="button.png" width="25" height="25" style="margin-top:600px;" />
<img src="button.png" width="25" height="25" style="margin-top:600px;" />
<img src="button.png" width="25" height="25" style="margin-top:600px;" />
<img src="button.png" width="25" height="25" style="margin-top:600px; text-decoration:none" />
How can I get rid of the blue border, which only appears in IE?
Simple fix, in your stylesheet create a style similar to this:
a img{
border:0;
}
In your case, you could update your style to include some of the inline styles you have in your HTML. For example, your stylesheet would be updated to:
a{
cursor:pointer;
text-decoration:none
}
a img{
margin-top:600px;
}
Add border="0" attribute to the img tag
Regarding the minor issue with Internet Explorer and the grayed box around the anchor tag - this is outline. To hide the outline box you can use following CSS:
a img{outline:none;}