Search the Community

Showing results for tags 'image'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 74 results

  1. Hi, I am a high school student working on a website for a digital media assignment. I am required to include a video introduction of myself. I have included the video, but I am having trouble shortening the gap between the video and the heading, as you can see in the picture I have provided. Any help anyone could give to me would be greatly appreciated, I hope this was posted in the right place.
  2. I want to display the time period 1887-1920 right below the image. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <title>Tribute Page</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container-fluid"> <div class="well"> <div class="main"> <h1 class="text-primary">Srinivas Ramanujan</h1> <h3 id="subhead">The man who knew infinity</h3> <figure> <img class="img-responsive img-rounded img-thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Srinivasa_Ramanujan_-_OPC_-_1.jpg" alt="Srinivas Ramanujan" width="22%" height="28%"> <figcaption>1887-1920</figcaption> </figure> <p id="para1"> <h3 class="head2">Why he is famous?</h3> <ul> <li>He is recognised as one of the greatest mathematicians of his time, but had almost no formal training in math.</li> <li>His infinite series for pi was one of his most celebrated findings.</li> <li>He was the second Indian to be inducted as a Fellow of the Royal Society.</li> <li>He compiled 3,900 results (mostly identities and equations), before he lost his life at the age of 32. </li> <li> A follower of his family goddess Mahalakshmi, Ramanujan credited her for his abilities.</li> <li>His house in Kumbakonam is now maintained as the Srinivasa Ramanujan International Monument.</li> <li>There is also a museum dedicated to telling Ramanujan’s life story.</li> </ul> <h3 class="head2">Life of S. Ramanujan-</h3></p> <p id="para2"> Born in South India, Ramanujan was a promising student, winning academic prizes in high school. But at age 16 his life took a decisive turn after he obtained a book titled A Synopsis of Elementary Results in Pure and Applied Mathematics. The book was simply a compilation of thousands of mathematical results, most set down with little or no indication of proof. It was in no sense a mathematical classic; rather, it was written as an aid to coaching English mathematics students facing the notoriously difficult Tripos examination, which involved a great deal of wholesale memorization. But in Ramanujan it inspired a burst of feverish mathematical activity, as he worked through the book's results and beyond. Unfortunately, his total immersion in mathematics was disastrous for Ramanujan's academic career: ignoring all his other subjects, he repeatedly failed his college exams.As a college dropout from a poor family, Ramanujan's position was precarious. He lived off the charity of friends, filling notebooks with mathematical discoveries and seeking patrons to support his work. Finally he met with modest success when the Indian mathematician Ramachandra Rao provided him with first a modest subsidy, and later a clerkship at the Madras Port Trust. During this period Ramanujan had his first paper published, a 17-page work on Bernoulli numbers that appeared in 1911 in the Journal of the Indian Mathematical Society. Still no one was quite sure if Ramanujan was a real genius or a crank. With the encouragement of friends, he wrote to mathematicians in Cambridge seeking validation of his work. Twice he wrote with no response; on the third try, he found Hardy.<br>Hardy wrote enthusiastically back to Ramanujan, and Hardy's stamp of approval improved Ramanujan's status almost immediately. Ramanujan was named a research scholar at the University of Madras, receiving double his clerk's salary and required only to submit quarterly reports on his work. But Hardy was determined that Ramanujan be brought to England. Ramanujan's mother resisted at first--high-caste Indians shunned travel to foreign lands--but finally gave in, ostensibly after a vision. In March 1914, Ramanujan boarded a steamer for England. Ramanujan's arrival at Cambridge was the beginning of a very successful five-year collaboration with Hardy. In some ways the two made an odd pair: Hardy was a great exponent of rigor in analysis, while Ramanujan's results were (as Hardy put it) <em>"arrived at by a process of mingled argument, intuition, and induction, of which he was entirely unable to give any coherent account".</em> Hardy did his best to fill in the gaps in Ramanujan's education without discouraging him. He was amazed by Ramanujan's uncanny formal intuition in manipulating infinite series, continued fractions, and the like. <br><br> </p> <br> <blockquote> I have never met his equal, and can compare him only with Euler or Jacobi." <br> <span>-Hardy</span> </blockquote> <p id="foot">Read more about <em>S. Ramanujan:</em> <a href="https://www.usna.edu/Users/math/meh/ramanujan.html" target="_blank"> <button title="Opens in new tab" type="submit" class="btn btn-primary">Here</button></a> </p> </div> <footer> © writer 2017</footer> </div> </div> </body> </html> CSS:- body{ line-height: 200%; } .well{ margin:5% 6% 5% 6%; } h1{ text-shadow: 2px 2px 3px; text-align: left; font-family: Algerian; } #subhead{ text-align: left; font-style: italic; text-shadow: 0 0 2px; font-family: "Comic Sans MS"; border-bottom: 2px solid gray; padding-bottom: 2%; } .head2{ text-shadow: 0 0 1px; } figure{ margin: 2%; display: inline; } img{ float: left; display: inline; } p{ text-align: justify; margin: 0 0 0 5px; } ul{ margin: 0 5% 5% 5%; padding-left: 20%; } li{ margin-left: 9%; } blockquote{ margin-left: 20%; } span{ margin-left: 70%; } #foot{ margin: 10% 0 1% 75%; } footer{ margin:3% 0 0 40%; } .main{ border-bottom: 2px solid gray; }
  3. I have gallery that generates dynamically from CMS (ModX). There is a 'title' property for each picture. And there is also a lightbox plugin (Magnific Popup) for the gallery that is written in JS which works normally, but I cannot display those titles as captions for each popup image. ('titlesrc' property of the plugin does not take captions from titles of images) Here's what I've added to the plugin file, but it works only after an image is increased (just once), but does not work when I click on the arrow buttons to slide through the images: document.onclick = myClickHandler; function myClickHandler (e) { document.getElementsByClassName("mfp-title")[0].innerHTML = e.target.parentElement.getAttribute('title'); } So I need either to add an event listener for arrow buttons inside the lightbox to change the particular title each time a picture is changed or initially to make the 'titleSrc' property work normally so to display a caption from the 'title' of an image. Would be very glad if someone could help me with the task!
  4. HTML CODE:- <body> <main> <article> <header> <h1>Azure Kingfisher</h1> </header><hr> <p>This stunning little kingfisher is common on waterways across the <a title="Top End Australia Video"; href=" " target="_blank">Top End</a>, but can be difficult to see well. this is some text about the kingfisher this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.sdnf iuhrwei hear hoheo eogflkvoiejar glk oisdfj w oaif iasdfi asoif asidfjsaifdj osaijdfiasdf insadfoi</p> <p> <figure> <a href="azure.html" target="_blank"> <img title="Click to enlarge" src="thumbnails/birdpict.png" alt="thumbnail" style="float:left; height:150px; width:110px" /></a> </figure> </p> <p id="arc2">this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.sdfh osadf' sfoi jsdfj sdofj sdfw'ej fsdlkf aslkfl askdfn sadf sadf oifn afoin asdfn saodifnwieafn'o iwnfkanef iewfan</p> </article> </main> Linked CSS:- body{ background-color: #1eed8c; margin-right: 20%; margin-left: 20%; border: 2px dotted blue; font-family: sans-serif; line-height: 180%; } h1{ color: blue; text-align: center; } p#arc2{ padding-left: 5px 5px 5px 5px; } article{ color: green; padding: 5px 5px 5px 5px; border-bottom: 1px solid rgb(88, 88, 88); } img{border: 2px solid black;} footer{ margin-left: 74%; } a:link {color: blue; background-color: transparent; text-decoration: none;} a:visited {color: maroon; background-color: transparent; text-decoration: underlined;} a:hover {color: yellow; background-color: transparent; text-decoration: none;} The pic of the kingfisher, which is a thumbnail, is right beside the text= arc2. There is no space between the image and the text. I tried padding the #parc2 (second article that was beside the image but still no effect). The image has a black border that I don't want to remove. If I add padding to the image the border sticks to the text(arc2).
  5. I'm a student, and currently busy with creating my own website, but now I've got a question which I can't figure out myself. My website is about professional cycling and on it I'll have the jerseys of the teams which I want to overlay when going over it with the mouse. I figured this out OK, but now it happens that if I move over it with my mouse, a big square overlays the picture (because it's a square picture with a transparent background) and I want that there is only an overlay over the jersey and not over the "background" of the picture. I hope you can help me! Need to fix this! Thank you in advance! .container { position: relative; width: 25%; height: auto; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: #00b0f0; opacity: 0.8; overflow: hidden; width: 100%; height: 0; transition: .5s ease; } .container:hover .overlay { height: 100%; } .text { white-space: nowrap; color: white; font-size: 20px; position: absolute; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } <div class="container"> <a href="AG2R.html"> <img src="https://i.stack.imgur.com/7839q.png" alt="AG2R La Mondiale" title="AG2R La Mondiale" class="image"> </a> <div class="overlay"> <div class="text">AG2R La Mondiale</div> </div> </div> This is the picture I used:
  6. 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?
  7. 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?
  8. 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>
  9. 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!
  10. 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.
  11. 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
  12. 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
  13. 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 !
  14. 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.
  15. 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????
  16. 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?!
  17. 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!
  18. 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;}
  19. 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.
  20. 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,
  21. 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.
  22. 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
  23. 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>
  24. 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.
  25. 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.