|
HTML - A Little Click Makes An Image Show, How?
I want to use HTML to make the following task...
I little link, when someone clicks on it, it displays an image at the top of it (Not load a whole new page with an image) Example Say you have this link linky I want when people click on it, it displays an image above it Can this be done using HTML? Thanks Similar TutorialsHello everyone I have run into a roadblock. I am trying to make a background image scale properly with Internet Explorer. I have successfully made the image fit the web browser right, using this code in a CSS class. The code I am using is as written: PHP Code: body.background { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../Images/Website Background-3.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../Images/Website Background-3.jpg', sizingMethod='scale')"; } this code makes the background I am using work correctly in Internet Explorer. However, when I use this code, it makes the rest of the website stop working. I can no longer click on any of the links on the page, or anything of the sort. However, all my styles for the links still remain on the page. Any suggestions? Thank you all, Mitch Guzman Hi I created a table with multiple rows and coloms.. I want show image on purtical table element after user clicks it. do i need tha help of javascript... i am already using javascript to display table.. can i use one more script in javascript I'm trying to develop a page that displays a simple concise summary of data neatly in rows. I am including a magnifying glass image next to each field to be used to display details of the summary field. I want the onclick event of the image to bring up an alert box with data in the field that contains the details of the summary field, but I can't get it to work. Here is the code from my ASP page: Code: <html>
<head>
<%
DB_ConnectionString = "Provider=SQLOLEDB.1; Password=pwd;User ID=user;Initial Catalog=myDB;Data Source=www.myserver.com;"
SQL = "SELECT * FROM myTable"
Set RST = Server.CreateObject("ADODB.Recordset")
RST.Open SQL,DB_ConnectionString
sFont = "<font face=" + chr(34) + "Arial" + chr(34) + "size=" + chr(34) + "2" + chr(34) + ">"
eFont = "</font>"
vToday = Date()
%>
<title>Daily Info</title>
</head>
<body bgproperties="fixed" topmargin="0" leftmargin="0">
<table border="1" width="100%" style="border: 1 solid #000000" cellspacing="0" cellpadding="2">
<tr>
<td width="100%" bgcolor="#FFFFFF" bordercolorlight="#000000" bordercolordark="#000000" colspan="10">
<p align="center"><b><font face="Arial" size="3">
Daily Info for <%Response.write(vToday)%></i></font></b></p>
</td>
</tr>
<%
Cellstart ="<td bgcolor=""#C0C0C0"" align=""center"">"
Response.Write "<tr>"
Response.Write Cellstart + sFont + "<B>Buyer Name</B>" + eFont + "</TD>"
Response.Write Cellstart + sFont + "<B></B>" + eFont + "</TD>"
Response.Write Cellstart + sFont + "<B>Company Name</B>" + eFont + "</TD>"
Response.Write Cellstart + sFont + "<B></B>" + eFont + "</TD>"
Response.Write Cellstart + sFont + "<B>Order Total</B>" + eFont + "</TD>"
Response.Write Cellstart + sFont + "<B></B>" + eFont + "</TD>"
Response.Write "</tr>"
Do Until RST.eof
vBuyer = rst("BuyerName")
vBuyerAddr = rst("BuyerAddress")
vCompany = rst("CompanyName")
vCompanyAddr = rst("CompanyAddress")
vOrderSum = rst("OrderSummary")
vOrderDetail = rst("OrderDetail")
Cellstart ="<td bgcolor=""#FFFFFF"" align=""center"">"
Response.Write "<tr>"
Response.Write Cellstart & sFont & vBuyer & eFont &"</td>"
response.write "<td>" & "<img src='magnifyB.JPG' onClick=alert(vBuyerAddr) width='15'>" & "</td>"
Response.Write Cellstart & sFont & vCompany & eFont &"</td>"
response.write "<td>" & "<img src='magnifyB.JPG' onClick=alert(vCompanyAddr) width='15'>" & "</td>"
Response.Write Cellstart & sFont & vOrderSum & eFont &"</td>"
response.write "<td>" & "<img src='magnifyB.JPG' onClick=alert(vOrderDetail) width='15'>" & "</td>"
Response.Write "</tr>"
rst.movenext
loop
Set rst = Nothing
%>
</table>
</body>
</html>
Can someone point out what I'm doing wrong. Thanks, Sup Hello guys. I really need your help. I whant to put a clickable image i my wordpress blog and have a click counter under it. I also want that the images only is clickable x amount of times ex. 2000 times and after that a new image will take it place saying, Thank you we have reached the total limit bla bla, this image should not be clickable anymore. the same ip only once. How can i do this thank you Hi! I've been working on a little website, but i want visitors to hear a welcome sound when they click on the website's logo. How can i do this with html? javascript? I came to this forums because i've seen very clever people here. Thanks for your replies! Hey guys, I want to click a button that is behind an image (set in absolute position). The button that I am trying to click is within an iframe so I cant use any sort of javascript to click it. The click must be real and not faken. Iframe containing button ----> Image over it Is there anyway I can setup the image so I would be able to click thru it (add transparency setting or something like that)? The image must remain visible but I want to be able to click the button that is under it. The goal is to make the visitor click the image but it would actually click the button in the iframe behind it. Thanks alot guys, I can't figure out how to script an image so that it slides to another area on the page when clicked on. For example, a logo that appears in the center of a blank page (vertical-align: middle), but when clicked slides smoothly to the top (vertical-align: top). Alternatively, it could be that clicking the image changes the vertical-align property of the entire table or cell. Either way, I can't figure out how to do this with a smooth animation. A fantastic example of this--where I got the idea, in fact--is the front page of tumblr.com, where clicking "Log in" smoothly slides the tumblr logo from the top of the page to the center. How is this done? I'm sorry if the solution is mind-bogglingly simple, I'm kind of a noob. But I've racked the web and I can't seem to find a script that does this. Can somebody please help? Thanks so much. Hello guys, I was wondering if anyone is aware of a script that does this: You have an image on your website. When you click on the image a box should appear where you can insert your email and send the photo to your email. Anyone aware of something like that? Thanks a lot! Hi all i need some help. I have created a simple gallery with a large image and smaller images to the left of it, when the small images are clicked they change to the large image, see an example here http://vfashion.co.uk/help/example.html but i want to be able to add a link below the main image so when its clicked the current image that is displaying large will open up in a new window. how would i do this??? the code for the page is below please can someone help me Code: <head>
<meta content="en-gb" http-equiv="Content-Language">
<style type="text/css">
.auto-style1 {
margin-bottom: 0px;
}
</style>
</head>
<TABLE id=table1 height=164 cellSpacing=0 cellPadding=0 width=605 border=0 class="auto-style1">
<TR>
<TD vAlign=top width=603 colSpan=2 height=20><B><FONT face=Arial color=#333333></FONT></B></TD></TR>
<TR>
<TD vAlign=top height=106 style="width: 200px">
<DIV align=center>
<TABLE id=table2 cellSpacing=0 cellPadding=0 width=147 border=0>
<TBODY>
<TR>
<TD height=10></TD></TR>
<TR>
</TR>
<TR>
<TD height=5><div align="center">
<table border="0" width="147" cellspacing="0" cellpadding="0" id="table23">
<tr>
<td align="center" colspan="2" height="10"></td>
</tr>
<tr>
<td align="center">
<img style="border-color: cccccc" alt="" src="1.jpg" width=70 border=1 onclick=document.url.src="1.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
<td align="center">
<img style="border-color: cccccc" alt="" src="2.jpg" width=70 border=1 onclick=document.url.src="2.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
</tr>
<tr>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">
<img style="border-color: cccccc" alt="" src="3.jpg" width=70 border=1 onclick=document.url.src="3.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
<td align="center">
<img style="border-color: cccccc" alt="" src="4.jpg" width=70 border=1 onclick=document.url.src="4.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
</tr>
<tr>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">
<img style="border-color: cccccc" alt="" src="5.jpg" width=70 border=1 onclick=document.url.src="5.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
<td align="center">
<img style="border-color: cccccc" alt="" src="6.jpg" width=70 border=1 onclick=document.url.src="6.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
</tr>
</table></TD></TR></TBODY></TABLE></DIV></TD>
<TD vAlign=top width=405 height=40 rowSpan=3>
<P align=center>
<img src="1.jpg" alt="" name="url" width="380" border="0" id="url"></P>
<P align=center>
Click to enlarge</P></TD></TR>
<TR>
<TD vAlign=top height=106 style="width: 200px">
</TD>
</TR>
Hi members... I am designing my new eBay advert in html using Dreamweaver CS3 I have designed many stuff in this that is pretty basic, and use the design view. I want to develop my ads this year from a static looking page to a more advanced page. Schuh do something similar to what I am after and I can't search the forums because I have no idea what it is called that I would like to do. Here is a link to their advert.. [url="http://cgi.ebay.co.uk/MOMENTUM-HARRY-DBL-MENS-BLACK-GREEN-FABRIC-TRAINERS-/390316948300?pt=UK_Men_s_Shoes&var=&hash=item99accd46a3"] notice how you can roll over images to show a larger preview, can anyone point me to a guide or at least tell me what i need to be searching for. Thanks John Would anyone be able to tell me why this image won't show? I have no idea! <tr> <td align="center"><img src="logo.jpg" alt="Flowers by Design" height="100" width="760"></td> </tr> hi people, Just a basic request t6o look over my code and let me know if im going wrong and also i t seems to be fine when i create it but when i load it to the server this is what i get.. http://www.basicproduction.co.uk/ here is my code HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Website coming soon!!!</title>
<style type="text/css">
<!--body {margin: 0px;}-->
</style>
<meta name="keywords"
content="Basicproduction, Liam Carlin, VJ, Video Production, motion graphics, Live performance">
<meta name="description"
content="Video Production, Motion Graphics, Live Video performance, Basicproduction, VJ Liam Carlin, Liam Carlin">
</head>
<body style="margin:0;background:#000;">
<div align="center"><a href="http://www.myspace.com/basicproduction" target="_blank"><img src="../Image/BP_Holding_page.gif" alt="" width="720" height="600" border="0"/></a></div>
</body>
</html>
where could i be going wrong? Thanks I'm almost embarrassed to post this. I've done this before, but I must be missing something... Here's the deal: I have a div with an id "note": HTML Code: <div id="note"> See us at the trade show! Call 555-1234 </div> In my CSS page I have these properties for the "note" id: HTML Code: #note
{
background-image: url(images/note.jpg);
clear: both;
}
The problem is, the text shows, but nothing I do gets the image as a background to show. The "images" directory is at the same level as the div's file, but I've tried the url with and without a beginning backslash. The image is just a single color, orange jpeg created in Photoshop. Any ideas what I'm missing anyone? Thanks for any help! It displays fine in Firefox - what am I doing wrong? (the image in question is 1/3 of the way down floated to the right of 'Snowshoeing and Winter Walking' It works if I pop the div inside the h2 tag but doesn't validate... http://www.colletts.co.uk/new_winter/slidedivcmh.html Code: div.floatedright { width: 238px; float: right; margin-left: 21px;}
.righttext {width: 100%; display: inline; text-align:right; color: #211d70; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height:normal; font-style:italic; float:right; font-weight:normal; letter-spacing:normal; text-transform: none;}
HTML Code: <div class="clearer"></div>
</div>
<div class="floatedright">
<a rel="shadowbox" href="img/snowshoeing_in_the_dolomites_arabba.jpg" title="Ideas & Information, Maps & Route Laminates" class="option"><img src="img/snowshoeing_in_the_dolomites_arabba_sella.jpg" alt="Snowshoeing on the Sella Shelf above Arabba" width="238" height="267" longdesc="http://www.colletts.co.uk/images/colhol_map.jpg" /></a>
<div class="righttext">Snowshoeing above Arabba</div>
</div>
<h2 class="minortitle"><a href="http://www.colletts.co.uk/winter/winter_snowshoeing.html">Snowshoeing</a> and <a href="http://www.colletts.co.uk/winter/winter_snowshoeing.html">Winter Walking</a></h2>
<p>And yet this area is not the exclusive terrain of skiers. Away from the ski fields, a separate winter paradise unfolds for walkers, snowshoers and cross-country skiers. Delightful trails meander alongside rivers and streams, through woodland and across winter meadows between enchanting Tyrolean hamlets and villages, which huddle around the spires of their picturesque churches.</p>
<p>Higher up, snowshoers experience the exhilaration of virgin snow on a labyrinth of waymarked routes, traversing the hidden snowfields, which undulate between a seemingly unbroken rim of spectacular peaks. Here, you could hear a pin drop, but for the vocal appreciation that persists amongst walkers and is the inevitable result of such an inspirational situation.<br /></p>
I want to have multiple banners appear every couple seconds like a slide show. Here is my website. (http://www.dubcityfilms.com) The banner is the one with the cars on it. I want to have 5 or so different ones that randomly switch. Can someone help me with this? Thanks. With the help of javascript im making a bookmark button. To show the button i use to img src to link to the correct folder/file. When i test the bookmarker on a test website it works perfectly, but it doesn't work when i copy/paste the code to the real website. The test website folder looks like this: test.html images/favo.png The real website looks the same as the test website: index.php images/favo.png The bookmark code is: <a href="javascript:bookmarksite('MyWebsite', 'http://www.MyWebsite.nl')"> <img src="images/favo.png" alt="bookmark" width="47" height="33" border="0" /></a> There is also some javascript code in the <head> but it's not necessary to post the code here because the bookmark script itself works. The 'real' website shows me a 'can't find image'-picture, which obviously means i've made a mistake linking to the .png file. Hopefully someone can help me out here because i'm puzzled. I've double checked the names of the folders and files so no mistake there. edit// Ok; i came up with the idea of adding a <base href> to the <head> of the index.php The entire code looks like this: <head> <base href="don't know what to write here"> </head> <body> <a href="javascript:bookmarksite('MyWebsite', 'http://www.MyWebsite.nl')"> <img src="images/favo.png" alt="bookmark" width="47" height="33" border="0" /></a> </body> I'm supposed to tell the browser where to look. In the img src i've explained where the favo.png is. The problem is that i have no idea what to write in the <base href>. When i access the ftp i have to click through several folders to get to the folder of the 'real' website. When i write the names of the folders in the <base href> the problem remains. Right click on the 'can't find image' it gives me an url of the website: http://www.MyWebsite.nl/MyWebsite/images/favo.png Which isn't the same as the folders i have to access on the ftp server. The order of the folders on the ftp server is as follows: public_html/MyWebsite/templates/MyWebsite/MyWebsite/images/favo.png Must be someone out there who can help me solve this html problem. www.jessicaloewen.com You'll see at the very top that the alternate text "menu" shows rather than my jpg Why is this and how do I fix it? If you click "view image" it will open the proper image in a new menu. I'm just curious if anyone knows how to do this. Basically what I want to do is have a series of links (lets say one, two, three, and so on) and when you click one of those links, the image below those links change to the respective link (if you click one, a picture of the number one shows up, if you click two, well you get the idea). How would I go about doing this? How I want this laid out: Link Link Link [-Image-] Thanks Hi all i have an upload form, and when the upload button/image is clicked to upload the file, i would like to have this cool ajax loader that just moves with some text under it saying "uploading...please wait". What is the easiest and best way to do this? I have looked all around javascript, etc and cant seem to find a perfect simple solution. I am adding this in my .tpl file THanks Hi I noticed that ie6 renders paragraph breakline spaces bigger than ie7 or FF. I got around it by using <br /><br /> instead of <p></p>, but is there a proper workaround to make ie6 conform? Also also tried stipulating the CSS for the p tags, but to no avail: .maintext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color:#fff; text-align:justify; line-height:100%; } .maintext p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color:#fff; text-align:justify; line-height:100%; } Cheers Shaun |
|||||||