Search the Community
Showing results for tags 'image'.
-
Dear all. For an image uploaded to a folder/directory and stored its name, type, and size in a DB table, what could be the merits of also storing its temporary name, noting that such temporary name is deleted by the server upon moving the image to the desired folder/directory?
-
Hello, I would like to implement a Javascript applet to display a given frame of a multi-frame TIFF image on a webpage. The multi-frame TIFF image will be stored on a public Gdrive folder and I would like the applet not to download the whole file but only the specific frame to be displayed (for performance since the file will be very large). Is that enabled by the Gdrive API (which functions should be used?) and what Javascript libraries would be the most appropriate for the task?
-
I am making this pointless thing where there is a blue square and the left of it moves into the right until you cant see it, and then the right side moves right to form a square again. After that, it does the same thing, but down, then left, and then back up to the starting point. I can't figure out what's wrong with my code though. So far I have until it goes left, but it doesn't finish. Try this out so you understand better. <!DOCTYPE html> <html> <head> <title>Square Matrix</title> </head> <body> <img id="BlueSquare" src="http://www.pd4pic.com/images/blue-square-color-block-background-pure-unicode.png" style="position:absolute; left:100px; top:100px" height="300" width="300"> <script type="text/javascript"> var blueHeight = 300; var blueWidth = 300; var blueX = 100; var blueY = 100; var blueNegX = 400; var blueNegY = 400; setInterval (function squareMatrix() { if (blueX < 400 && blueY == 100 && blueHeight < 301) { blueX += 1; blueWidth -= 1; document.getElementById("BlueSquare").width = blueWidth; document.getElementById("BlueSquare").style.left = blueX + "px"; } if (blueX > 399 && blueY == 100 && blueWidth < 301) { blueWidth += 1; document.getElementById("BlueSquare").width = blueWidth; } if (blueX == 400 && blueY < 400 && blueWidth > 299) { blueY += 1; blueHeight -= 1; document.getElementById("BlueSquare").height = blueHeight; document.getElementById("BlueSquare").style.top = blueY + "px"; } if (blueX == 400 && blueY > 399 && blueHeight < 301) { blueHeight += 1; document.getElementById("BlueSquare").height = blueHeight; } if (blueX > 399 && blueY == 400 && blueHeight > 299) { blueWidth -= 1; document.getElementById("BlueSquare").width = blueWidth; } if (blueX < 401 && blueY == 400 && blueWidth < 301) { blurX -= 1; blueWidth += 1; document.getElementById("BlueSquare").width = blueWidth; document.getElementById("BlueSquare").style.left = blueX + "px"; } }, 10); </script> </body> </html>
-
I was wondering if there is a way to detect when a certain image is in a certain area on a page. I'm making a little game where you move a character around (which is an image), and when any part of the character is over a certain 100x200px area, it activates a function. Is this possible with JavaScript? If not, can I do it with another language that works with JavaScript and html? I'd prefer JavaScript. Thanks!
-
I've a beginner's problem maybe someone can help with. Imagine a game simulating a sporting event (baseball, boxing, football, &c.). The games, themselves, are divided into time periods -- innings, rounds, quarters, &c. -- and one cannot know ahead of time how many periods actually will be played. So, for example, baseball is a nine-inning game -- unless there is rain or the need for extra innings if a tie; boxing is so many rounds -- unless there is a knockout or other fight-ending incident. The simulation addresses this within the game via a template -- the template describes with html what the presentation of one period -- inning, round, quarter, &c. -- will look like, and the simulation then simply calls the template for however many periods it needs to complete the contest. My problem (we'll use boxing hereafter) is that I want to install a different image (a round-card girl with card showing the correct round number) at the beginning of each round. My thinking so far is to create an array, var cardgirls=new Array(), with each of 15 girls occupying a slot in the array, cardgirls[0].src=../../images/RCG1.png, &c.; body onload = "Cardgirl(cardgirl1, cardgirls)"; &c. The difficulty is as follows: I can call for a specific card girl (one for all the rounds) by using <td id=img><img src = "../../images/RCG1.png, and the first card girl then will appear atop each round. HOWEVER, if I try to substitute a javascript function for the image source (to change the src code and get a different image) -- document.getElementById("cardgirl1).src=cardgirls[k].src (referring back to the array); body onload = "Cardgirl(cardgirl1, cardgirls);"...<td id="img"><img id = "cardgirl1">, &c. -- I can get the images to cycle in order, but they only appear for the first round (NO images appear for rounds 2 through end, only the alt, "Cardgirl"). For clarity, let me put it another way: The game is loading the "rounds" template ("innings" template -- whatever) for every round the game calls for and using an anchor tag to distinguish them [name=$$No.$$, so that each "round" template has "name=1; name=2; name=3, &c.]. If I use a general source for ONE of the images, img src="../../images/RCG1.png", that image will appear above ALL the rounds; BUT, if I call a javascript cycle function, the template tries to cycle ALL of the photos in the first round and installs NONE of them in rounds two to end, which remain blank save for the alt unless I also install a default image [src=../../images/RCG16.png, &c.]. I gather that, somehow, I need to link the image placement -- one per use of the template -- with the anchor ID, but so far my efforts to do that have not met with success. Nor was I successful when I relocated the javascript function from the general head to the end of the "rounds" template (on the assumption that, each time the template was used, it would call anew the cycle function). Anyone have any idea what I'm doing wrong? The relocation idea did get me the proper number of cycles, e.g., 7 for 7 rounds, but that just caused RCG1 to be the girl with card, Round 8, instead of Round 1 or Round 12 (what appears when the function is left in the head). Relocating does not move the image to the correct round.
-
Hello everyone, I am trying to make a navigation bar. I want the buttons to be image hyperlinks that change opacity on hover and click. This is how I am doing it: <style> .jw-button a:link, .jw-button a:visited { border: 2px dotted orange; opacity: 0.6; overflow: hidden; } .jw-button a:hover, .jw-button a:active { border: 2px dotted yellow; text-decoration: none; /* to remove the little line */ opacity: 0.95; overflow: hidden; } </style> <body> <div class="jw-button"> <a href="http://www.jasonwangart.com/p/spreads.html"> <img src="https://1.bp.blogspot.com/-s92F8qjBMsg/VylLTxoeBLI/AAAAAAAABN8/h5nPS8xOxyQE2PSqyNYynPCMhCzxt8OkwCK4B/s400/20160503%2B-%2Bbuttons-02.png" alt="illustrations" width=auto height="25px" /> </a> <a href="http://www.jasonwangart.com/p/tutorials_2.html"> <img src="https://1.bp.blogspot.com/-xAWLlsmJLjA/VylLT3LuO-I/AAAAAAAABOU/6N04uTBi69MvWJtOqPVr5ZvHyKYhV-eKwCK4B/s400/20160503%2B-%2Bbuttons-03.png" alt="tutorials" width=auto height="25px" /> </a> <a href="http://www.jasonwangart.com/p/references_3.html"> <img src="https://2.bp.blogspot.com/-iGP0rlCRJBQ/VylLT61jNxI/AAAAAAAABOQ/oPp61KLO6LgZuSFGLjpWF5JTxto6yqVSQCK4B/s320/20160503%2B-%2Bbuttons-04.png" alt="references" width=auto height="25px" /> </a> <a href="http://www.jasonwangart.com/p/contact.html"> <img src="https://4.bp.blogspot.com/-FJQ2uySI0f0/VylLTxelv9I/AAAAAAAABOY/FjS6c-OOc2Q1hdNhVL_-yBUGvCsX9g10gCK4B/s400/20160503%2B-%2Bbuttons-05.png" alt="contact" width=auto height="25px" /> </a> <a href="http://www.facebook.com/jasonwangart"> <img src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png" alt="facebook" width="30px" height="30px" /> </a> <a href="http://instagram.com/jasonwangart/"> <img src="http://3.bp.blogspot.com/-Bip-5XKJURo/VSQhElKMGkI/AAAAAAAAA38/RM3xUkaQWUM/s1600/LOGO%2Binstagram%2Bsimple%2B72%2Bc.png" alt="instagram" width="30px" height="30px" /> </a> </div> </body> However, as you can see the results at: www.jasonwangart.com , the resulting divs (at top of page navigation bar, in the orange dotted lines) that contain the image hyperlinks do not expand to fit the image hyperlinks. I have put "display: inline-block;" in the code, but the divs still are not expanding. Do you know why this is? Thank you, Jason
-
Hi all I have a html code: <a href="link" > <img style="position:absolute; top:400px; left:150px; width:200px; height:100px" src="images/funk.jpg" /> </a> I want to write a text below this image. How can i do this? Regards
-
hello my programming is focused at the image processing library GD and FREE TYPE. I tried , amongst others, the script at this page : http://code.tutsplus.com/tutorials/build-your-own-captcha-and-contact-form--net-5362 but I cant get it working. I placed the true type font *.ttf file in the right directory but still get an error message saying: The image 'http://localhost/mydirectory/captcha.php' can't be displayed because it contains errors. (not sure this is the correct translation of the errormessage as it was displayed in my own language). I tried many things. like placing it in another directory. I checked phpinfo() to see if GD was installed which it was. Firefox gives an error message, IE and Chrome just dont show anything. This is the code: <?php session_start(); $string = ''; for ($i = 0; $i < 5; $i++) { // this numbers refer to numbers of the ascii table (lower case) $string .= chr(rand(97, 122)); } $_SESSION['rand_code'] = $string; // $dir = 'fonts/'; $dir = 'http://localhost/mydir/fonts/'; $image = imagecreatetruecolor(170, 60); $black = imagecolorallocate($image, 0, 0, 0); $color = imagecolorallocate($image, 200, 100, 90); // red $white = imagecolorallocate($image, 255, 255, 255); imagefilledrectangle($image,0,0,399,99,$white); // imagettftext ($image, 30, 0, 10, 40, $color, $dir."arial.ttf", $_SESSION['rand_code']); imagettftext ($image, 30, 0, 10, 40, $color, "arial.ttf", $_SESSION['rand_code']); header("Content-type: image/png"); imagepng($image); ?> What I want to know first is if I understand fully how it should be done. Maybe the tut I'm working with is not complete. Online I found a few topics with the same error report, they solved it by saving it as another file format (not utf-8). I would like to try that but dont know how. Notepad doesnt seem to have that feature of another file format like UTF-8 NO NOM. And besides that: WHY is file format so important? Please help !
-
Hello guys! I'm having serious troubles painting a PNG image. All the threads I see change the background color as well. I need to change the color of a customizable item I want to sell (i.e. glasses: changing color of the glass or temples or front) whenever the customer push a button on a color panel next to it. I've start splitting the original image in 4 .png parts (in the example: glass, front part, left temple and right temple) and I would place them one above the others. How could I change the color of a the right temple, for example? Is it possibly to color it with a non-solid color? I mean, respecting the shadows or reflections of the image (like Photoshop does). Thank you team.
-
So recently I got my hands on one of youtube videos, it's quit old, and the guy explaining how to create a form for uploading image and all data that is connected with it, to MySQL and then showing on your web site. So everything is ok, but webpage does not display any images, it just show me white picture frame with picture icon on the top. This is my connection file with database: <?php $hostname_phpimage = "***"; $username_phpimage = "***"; $password_phpimage = "***"; $database_phpimage = "***"; // Create connection $inkedmen_marko = mysql_pconnect($hostname_phpimage, $username_phpimage, $password_phpimage); // Check connection if ($phpimage->connect_error) { die("Connection failed: " . $phpimage->connect_error); } ?> Then the file that uploads the images: <?php require_once('php/connect.php'); if($_POST['submit']) { $name=basename($_FILES['file_upload']['name']); $t_name=$_FILES['file_upload']['tmp_name']; $dir='/home4/inkedmen/public_html/images'; $cat=$_POST['cat']; if(move_uploaded_file($t_name,$dir."/".$name)) { mysql_select_db($database_phpimage, $inkedmen_marko); $qur="insert into anglija (mid, cid, name, path) values ('','$cat','$name','/home4/inkedmen/public_html/images/$name')"; $res=mysql_query($qur,$inkedmen_marko); echo'file upl success'; } else { echo 'not uploaded'; } } ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="file_upload"/> cat_id <input type="text" name="cat" /><br/> <input type="submit" name="submit" value="upload"/> </form> </body> </html> Then this one shows me what countries I have in one of the data base tables, so there is two england and slovenia, they both have a separate id that I have to type when uploading an image: <?php require_once('php/connect.php'); mysql_select_db($database_phpimage, $inkedmen_marko); $qur="select * from cat"; $res=mysql_query($qur,$inkedmen_marko); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <?php while($row= mysql_fetch_array($res)) { ?> <h1><a href="image.php?cid=<?php echo $row['id']?>"><?php echo $row['name'] ?> </a></h1><br/> <?php } ?> </body> </html> And finally, when I push on each country it directs me to the pictures that are connected with that countries according to the id given: <?php require_once('php/connect.php'); mysql_select_db($database_phpimage, $inkedmen_marko); $id=$_GET['cid']; $qur="select * from anglija where cid='$id'"; $res=mysql_query($qur,$inkedmen_marko); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <?php while ($row=mysql_fetch_array($res)){ ?> <img src="<?php echo $row['path'] ?>" width="300px" height="200px"> <br/> <?php } ?> </body> </html> So in the end it directs me to the pictures, but I can't see the pictures, it's just white windows with icon on the top. The pictures uploads to the image folder, the id, names of the file, path also uploads good, but somehow I can't show the images. I know it should be something small, but I can't figure it out. Maybe someone have any ideas????
-
Hi, The website I am currently working on is this: annascherman.com I have set up the image gallery to be an un-ordered list so that I could achieve the irregular grid. I would love for the images to have a slight dark tint on top of them which goes away when you hover over an image (see example here: http://www.wallpaper.com/design/wallpaper-power-200) but for some reason, whenever I add a hover pseudo-element, I get a black background behind the image (I know this because it is also appearing to the right of the image, which I assume has to do with how I set things up as an un-ordered list - it is reading this space as part of the background). What am I doing wrong?!
-
Hello all, Context: I work at a small print shop; I'm in charge of my company's online storefronts where customers can order printed goods. We use EFI Digital StoreFront and just got a new extension/program/plugin called Directsmile that lets us offer products with variable data and mailing lists. The program works with InDesign; I build the art file in InDesign and Directsmile links to InDesign to add variable data fields to InDesign's text fields and image frames. When multiple data fields are used together, their rules need to be defined so if one field is not used, the others will move up to fill in the gap. Extra characters like divider characters and phone number labels (eg. "fax 123.456.7890") are also defined in the rules, so they only appear when the associated field is in use. I define those rules using Directsmile. I can choose to either use the built in tool to define the boolean properties of the variable data fields, or for more complicated formatting, I can use javascript. See below for an example of how phone numbers are formatted on a business card: The Problem: The people who designed Directsmile figured that if somebody wanted to use variable data for an image, it was going to be fixed in one place, and wouldn't be positioned in relation to the other fields. Directsmile supports variable data images placed in fixed positions on the page, and it supports very flexible variable data text with positioning relative to other variables in the same text box, but it does not support image frames inserted into text boxes. When I try it, the image frame vanishes. Because of this, there is a problem with variable images inserted between sections of variable text: The customer can choose to fill in any of the fields, or none, so the positioning of every element varies with each data merge record. I can't put the image inside the text box; they have to remain as independent elements. But as independent elements, they will not be placed properly on the page; the image will remain entirely static, and text that runs too short will leave a gap where text that runs long will run over/behind the image. Also, if the customer chooses not to use the image field, the second section of text will be orphaned down the page instead of moving up to fill in where the image would have been. The Solution? The only potential workaround I can think of would be to use js on a text box (like the "numbers" field in the business card example) to define: -placement of text and image -if there is an image, then insert appropriately sized space between sections of variable text -if there is text above the image, the image is moved down the page one line height for every line of text above Except, I don't know how to use javascript to place an image, or how to position it according to how many lines of text are preceding. I don't even know if that's possible. If I could be pointed in the right direction, I would be so grateful. I'm a print designer, not a programmer; I consider myself proficient at HTML and CSS but javascript is like trying to read a foreign language- I can pick up on the gist of things, but I have a LOT of difficulty writing it and knowing exactly what each bit does. I am learning, but commerce waits for no man and I will likely need a solution before I can come up with one independently so I'm trying to head this off. I've already talked to product support for help, and they didn't know of a way to achieve this, though they couldn't think of anybody who'd ever tried it, either, so I would really appreciate any help or tips you could give me. I'm sorry I don't have any script to show for this particular project, but I don't even know where to begin! Please bear with me in my ignorance. I know this is a really weird application of javascript and it doesn't help things any. Thank you all for reading that wall of text, and for any assistance!
-
Hello, I'm working to create a website where you have three images side by side. I would like to justify through three align an image on a div. I have created a class, but on the one page he does this and on other page aligns he doesn't matter. My question is: can anyone advise me how I can fix this that the three be aligned the same images on all pages? Thanks in advance. page 1 here is aligned:<div id="box4"><h2>Gebouwen</h2><p class="right"><img src="images/gebouwen/image1.jpg" width="250" alt="text"><img src="images/gebouwen/image.jpg" width="250" alt="text"><img src="images/gebouwen/image3.jpg" width="250" alt="text"><img src="images/gebouwen/image3.jpg" width="250" alt="text"></p></div>page 2 here is not aligned:<div id="box4"><h2>Musea</h2><p class="right"><img src="images/musea/image4.JPG" width="250" alt="text"><img src="images/musea/image5.jpg" width="250" alt="text"><img src="images/musea/imagr6.jpg" width="250" alt="text"></p></div> My css is:.right{margin: 30px;text-align: justify;}div#box4{width: 1000px;background-color: #660000;float: left;}
-
Hello Internet, I'm having an issue with how Safari is rendering a picture on my smartphone - but not chrome. Any thoughts on why this is happening? Please attached image.
-
Dear all , Could you please help to on how to reside border to fit the image? Please look at my red arrow image screenshot. Thank for any suggestion. Thanks,
-
Hey everyone. I wanted to find out how to make space between my image and text. Right now the page looks somewhat like this: http://jsfiddle.net/gmhuk3kq/4/ An image and text have no space between them like I want to. I tried to do margin and padding but they didn't work. I'm not really good with code (I'm a beginner) so I don't know maybe I'm doing something wrong. And I want my text not to be under the picture but for it go downwards not under the image. Thank you for whoever answers.
-
Linked is my website that I have been working on and off for awhile. As you can see the image is not inline with the title, I realise this is probably a jquery issue that I am just not getting. Can anyone advise me on the correct tag or class I should be applying to have it inline with the title. Thank you http://mrt.guardian1.com.au:57005/test/index.php
-
Does anyone know how I can get the Text Image to be in the same line as the search bar? Right now the Image sits on top of the Search Bar. This is what I have for the code so far... <!DOCTYPE html><html><script> (function() { var cx = '015893638143991805514:c78o5hkpg04'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })();</script><body><div style="background-color:white; color:white; margin:15px 0px 0px 0px; padding:0px"><img src="http://www.weebly.com/uploads/1/4/3/9/14399682/357638_orig.jpg" border="0" width="220" /><gcse:search></gcse:search></div> </body></html> -
i have a code to change a imagen to another by passing the mouse over. What i want is that when i pass the mouse over the image, this convert to a video, i am a beginner in this and i tried a lot but i can't solve this. This is my code: <head><script language="JavaScript">{alt0 = new Image();alt0.src = "img0.png";alt1 = new Image();alt1.src = "gif1.gif";alt2 = new Image();alt2.src = "gif2.gif";alt3 = new Image();alt3.src = "gif3.gif";graphic1= new Image();graphic1.src = "img1a.png";graphic1on = new Image();graphic1on.src = "img1b.png";graphic2= new Image();graphic2.src = "img2a";graphic2on = new Image();graphic2on.src = "img2b";graphic3= new Image();graphic3.src = "img3a.png";graphic3on = new Image();graphic3on.src = "img3b.png";}function imageChange(imageID,imageName,imageID2,imageName2,imageID3,imageName3) { {document.images[imageID].src = eval(imageName + ".src");document.images[imageID2].src = eval(imageName2 + ".src");document.images[imageID3].src = eval(imageName3 + ".src");}}</script><body><center><table border="0"><tr><td><a onmouseout="imageChange('global','alt0','one','graphic1')" onmouseover="imageChange('global','alt1','one','graphic1on')"><img border="0" name="one" src="img1a.png" /></a></td><td><a onmouseout="imageChange('global','alt0','two','graphic2')" onmouseover="imageChange('global','alt2','two','graphic2on')"><img border="0" name="two" src="img2a.png" /></a></td><td><a onmouseout="imageChange('global','alt0','three','graphic3')" onmouseover="imageChange('global','alt3','three','graphic3on')"><img border="0" name="three" src="img3a.png" /></a></td></tr></table></center><center><table border="0"><tr><td><img height="290" name="global" src="img0.png" width="530" /></td></tr></table></center></body></head> i actually use a gif but this images are very slow to load so i used the "gfy" page, that convert the gif to a video. This is the link to the "gfy": http://gfycat.com/ShockingDependableHogget and this is the code: <video id="gfyVid1" class="gfyVid" width="646" height="326" autoplay="" loop="" muted="muted" style="display: block;"> <source id="mp4source" src="//zippy.gfycat.com/ShockingDependableHogget.mp4" type="video/mp4"> </video> So, what i want is replace the gif image for this video... Thank for reading and sorry for my english.
-
I am using resized images as thumbnail links. I want the thumbnails to be 100px by 100px but I want the images to be resized so that their smaller dimension becomes the 100px edge and the other dimension gets cropped evenly from either end. For example, if the "src" image is 600px wide by 800px high, I want the thumbnail image to crop to 100px wide and 100px high in such a way that the original image would show up as though 100px had been removed from both top and bottom and then the whole thing was reduced in size by 600%. Here's an example of what I have so far for each image: <img src="img/image01" alt="Image Title" height="100px" width="100px"> This is allowing me to efficiently scale the images to 100px by 100px, but they're being distorted by being forced into a square shape when most of them are rectangular. Is there an easy solution I can paste into each <img> tag? I would also be open to using CSS.
-
Hi Forgive me if this is answered on here. I cant find anything, but that's probably because I don't know the proper terminology to search for. If I explain what I want to do, perhaps a kindly sole might guide me in the right direction. I want to use a (single) picture of me and some buddies. I would like to have the user hover over each person, and have text information displayed while the mouse is within a defined area of the picture. I think I remember, during the stone age, Front page allowed the area to be selected with a mouse. I'm using notepad++ now, so like the wife says "I'm completely without a clue". Many thanks AJ
-
Hello Everyone,I'm a total novice with CSS, but I'm trying to learn. I'm trying to place an image with a caption into a paragraph. I did some Googling and found http://www.corelangs.com/css/box/caption.html. I pretty much copy and pasted an example from this website with a few changes. Everything seemed to work fine, until I tried to align the image to the right of a paragraph with a width of 800px. Here is the css: .imageholder {position: relative; width: 260px; border:thin solid black} .imageholder .caption {position: absolute; width: 260px; bottom: 0px; left: 0px; color: #000000; background: #ffffff; text-align:center; font-size:11pt; font-family:'Palatino Linotype', serif; opacity:0.8; border:thin solid black} and the html: <h2>Glenwood Sunday Market</h2><p><span class="imageholder" style="float:right;"><img src="glenwood.jpg" width="100%" style=:margin:0; padding:0; position:relative; left:-20"> <span class="caption">Natasha and Scott at the Glenwood Market </span></span>Blah blah blah etc etc</p> When I used the code as written at corelangs.com, with a <div> element for "imageholder", the image and caption looked fine, but the <div> element destroyed the paragraph formatting, and the paragraph spread to fill the width of the page, with the image at the far right. I tried using <span> instead of <div> since it is an inline element, and the positioning was fine, but the image was always offset by about 20px right of the <span> frame. I've attached a screen cap with borders added for clarity. What is the right way to do this? Should I be using <div class="imagegolder"> or <span class="imageholder">? Thanks, Adam
-
Guys, good morning. I am looking for a long time this helps, I found this forum and hope I succeed in this quest is the following, http://studioplanoverde.com.br/site/ this link, or by clicking the PORTFOLIO menu, it goes to down in the page itself and show some pictures, and when you click on top of the image, it opens, it opens only remaining on the page itself, what I need and MUCH, is that when you open the image, it may rise slightly, why is paying attention, the image opens but gets half of the page, then you have to go down a little scroll rod. I finally found the file for this purpose, at first, seems a bit messy, but that's the way it is in the file, I'll post here. Since now, and very grateful for the attention and mostly anyone who can help me. /* Dynamic Window Ajax Portfolio Content */"use strict";(function($) {var $actual= null;var obert=false;$(".ch-grid").click(function() {obre($(this).attr('id'));$actual=$(this);});$(".folio-btn").click(function() {$(".project-window").slideUp("slow");obert=false;});//obre('portfolio-1.html',1);function obre(quin, dummy){$.ajax({url: quin,success: function(data) {$('.project-content').html(data);$(".project-content").hide(0)$('.project-window').hide(0)tanca();canvia();worksCarousel();if(dummy!=1){// if(obert!=true){$("html, body").animate({ scrollTop: $('#portfolio').offset().top }, 500, function(){$('.project-window').show(0);$('.project-window').animate({height:900}, 500,function(){$('.project-window').css('height','auto');// $(".project-window").slideDown(1500, function() {$(".project-content").fadeIn("slow");});});/* }else{$("html, body").animate({ scrollTop: $('#anchor5').offset().top }, 300, function(){$('.project-window').show(0);$(".project-content").fadeIn("slow");});}obert=true; */}}});}function tanca(){$(".close").click(function() {$('#portfolio').slideUp("slow");$('#portfolio').animate({ scrollTop: $('#portfolio').offset().top });obert=false;});}function seguent(){if($actual.next().hasClass('final')){$actual=$($('.inici').next());}else{$actual=$($actual.next());}if($actual.hasClass('isotope-hidden')){seguent();}else{obre($actual.attr('id'));}}function enrera(){if($actual.prev().hasClass('inici')){$actual=$($('.final').prev());}else{$actual=$($actual.prev());}if($actual.hasClass('isotope-hidden')){enrera();}else{obre($actual.attr('id'));}}function canvia(){$('.btn-next').click(function() {seguent();$("html, body").animate({ scrollTop: $('#project-show').offset().top }, 1000);});$('.btn-prev').click(function() {enrera();$("html, body").animate({ scrollTop: $('#project-show').offset().top }, 1000);});}// Carousel Project Openedfunction worksCarousel(){var totalWorks = $(".wrapper-project ul li").length;var ampleWork = $(".project-content").width();var ampleTotalWorks = totalWorks*ampleWork;$('.wrapper-project ul').css('width',ampleTotalWorks)$("html, body").animate({ scrollTop: $('#project-show').offset().top }, 1);var fragment = document.createDocumentFragment(),li = document.createElement('li');while (totalWorks--) {fragment.appendChild(li.cloneNode(true));}$('.controller-3 ul').append(fragment);var index3 = 0;var pos3 = 10;$('.controller-3 ul li:first-child').addClass('selected');$(".controller-3 ul li").click(function(){index3 = $(this).index();$(".wrapper-project").stop().animate({scrollLeft:ampleWork*index3},'slow');$('.controller-3 ul li').removeClass('selected');$(this).addClass('selected');//alert(ampleitem);});$(".w-next").click(function(){if( index3 != $(".controller-3 ul li").size()-1){ index3++; $(".wrapper-project").stop().animate({scrollLeft:ampleWork*index3},'slow'); pos3++; $('.controller-3 ul li.selected').removeClass('selected').next().addClass('selected');} });$(".w-prev").click(function(){ if( index3!=0 ){ index3--; $(".wrapper-project").animate({scrollLeft:ampleWork*index3},'slow'); pos3--; $('.controller-3 ul li.selected').removeClass('selected').prev().addClass('selected'); }});}})(jQuery);
-
Hi; This is very basic so sorry for that, but, can I actually draw an image into a canvas from a file in the project folder? I want to have a click button which when clicked puts an image, .jpg in the canvas but my code below does nothing except put the image in the window next to the other controls. It is pretty much the code example in the w3 schools example page but it doesn't draw the image into the canvas when the button is clicked. I want to draw an image from the project folder rather than draw it from an image already on the page. Regards Bloodaxe. index.html testprojectcss.css
-
I've stumbled upon yet another trouble with internet explorer where my images mysteriously becomes 1px by 1px instead of sizing according to it's container like other browsers.I googled the problem and it seems like a lot of people gets this problem when applying heigh:auto; to an image. I accually had this applied but it wasn't solved by removing it.I'll just leave an url for the page here so you can see for yourselves:http://tec.macework.se/catalog/products/components/ Any clues?
