Monday, 1 August 2016

IMAGE SRC PATH WITHOUT SOFTWARE


---------------------------------------------------------------------------------------------------------
IMAGE SRC RELATIVE  PATH WITHOUT SOFTWARE
1) MAKE MY FOLDER
2) MAKE 2 DIRECTORY FOLDERS
3) 1,2,3 FOLDERS KEEP INSIDE C:\Users\Qamar\Desktop\MY\1\2\3
4) 4,5,6  FOLDERS KEEP INSIDE C:\Users\Qamar\Desktop\MY\4\5\6
------------------------------------------------------------------------------------------------------------
WHEN IMAGE & HTML PAGE IN SAME MY FOLDER USE THIS CODE:
HTML PAGE URL IN GOOGLE CHROME:
file:///C:/Users/Qamar/Desktop/MY/HTML1.html
IMAGE PAGE URL IN GOOGLE CHROME:
file:///C:/Users/Qamar/Desktop/MY/smiley.gif
REMOVE SAME BLUE PART IN BOTH URLS:
file:///C:/Users/Qamar/Desktop/MY/
HTML PAGE INSIDE CODE:
smiley.gif
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
CODE:
-------------------------------------------------------------------------------------------------------------
<html>
<body>
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
<img alt="ALT NOT SHOW" title="IMAGE TITLE TAG SHOW IN THIS LINE" src="https://www.computerhope.com/logo.gif">
<style>#ID01{min-width:500px;}IMAGE SRC WITH ID</style><img src="smiley.gif" id="ID01"></img> 
<button style="background:#fff url(https://www.w3schools.com/tags/smiley.gif)no-repeat center;height:100px;width:200px;color:red;">BUTTON3</button>
NOTE: INLINE CSS WE NOT USE QUOTATION MARK  FOR IMAGE URL ""
</body>
</html>
-------------------------------------------------------------------------------------------------------------
BLOB IMAGE URL
https://www.w3schools.com/2ad91bbc-8305-445f-9d33-b11b3ff1c56d
-------------------------------------------------------------------------------------------------------------
<img src="blob:https://www.w3schools.com/2ad91bbc-8305-445f-9d33-b11b3ff1c56d" title="Smiley.gif" width="42" height="42">
-------------------------------------------------------------------------------------------------------------
PIXEL TO CM CONVERTER
https://www.vesterkopi.dk/en/help/562-convert-pixels-to-cm.html
https://www.w3schools.com/code/tryit.asp?filename=FY8JTGCXZT77
<div style="background-image:url(smiley.gif);height:42px;width:42px;"></div>
-------------------------------------------------------------------------------------------------------------
<html>
<body>
<style>
img{
Width:148px;
Height:93px;
}
</style>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUJXR0yTfXA_jdSn2UUm8iZWfJnTJKdqqW8rbhSyUoz_r9weG2ZKJ6Jtyr-Pidd6bwgjQMhQ1TCmbEn_W0ccwn27EWQlEDznmDuRuL0ZIzHaWWuy2nXXAkZ_XG8gbcBtP2Y7ZNb0mVUk1J/s300-c/BUTTON+CHANGE+INTO+MENU.png">
<!-- GO TO PIX TO CM SITE -->
<!-- https://www.vesterkopi.dk/en/help/562-convert-pixels-to-cm.html -->
<style>
img{
Width:3.8cm;
Height:2.4cm;
}
</style>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF8TO290dkxpYr4Yn-hWzJWTgQ2JECX7FwtQ0WuUhGaPxECtr-CI_BH_r6pyGt3Bqpv672ewPAQ13LdrqAkNUWfE3ZIulaRmvEL73KXQO4i1Yk9nDRAu3GFZmK5OaJONLnf0IlBuPZqClA/s320/BUTTON+CHANGE+INTO+MENU.png">
</body>
</html>
-------------------------------------------------------------------------------------------------------------
BACKGROUND IMAGE FIX OR SCROLL
-------------------------------------------------------------------------------------------------------------
<html> <!-- https://www.youtube.com/watch?v=IqQQFc9oA_k --> <!-- http://www.vishacademy.com/ --> <!-- https://www.w3schools.com/cssref/pr_background-attachment.asp --><head> 
<style> body{ padding:250px; background-image:url(https://goo.gl/YBbjGr); background-repeat:no-repeat; background-position:40% 50%; background-attachment:fixed; }</style></head><body><h1>BACKGROUND IMAGE FIXED BUT PARAGRPH SCROLL OVER THE IMAGE</h1></body>
-------------------------------------------------------------------------------------------------------------
IMAGE CSS CLASS OR ID CODE
<style>.CssClass{height:100px;width:100px;border: 5px double;}</style><img class="CssClass"src="smiley.gif">
<style>#CssId{height:100px;width:100px;border:5px double red;}</style><img id="CssId"src="smiley.gif">
CSS CLASS ATTRIBUTE
<!-- https://www.w3schools.com/cssref/sel_before.asp -->
<style>a[class]:before{content:attr(class);color:red;}</style><a href="" class="CssClass">
-------------------------------------------------------------------------------------------------------------
<style>
img#sc_logo_top_image{
width: 165px;
height: 42px;
background:url(https://images-na.ssl-images-amazon.com/images/G/02/rainier/nav/sc-unified._V360963816_.png) no-repeat;
}
</style>
<img id="sc_logo_top_image"></img>
</body>
-------------------------------------------------------------------------------------------------------------
ABOVE CODE WRITE AS INNER CSS CODE IN HTML 
-------------------------------------------------------------------------------------------------------------
<div style="
width: 165px;
height: 42px;
background:url(https://images-na.ssl-images-amazon.com/images/G/02/rainier/nav/sc-unified._V360963816_.png) no-repeat;
"> </div>
-------------------------------------------------------------------------------------------------------------
transparent thumbnail on image

How do I make thumbnail image backgrounds transparent? - Answers

https://answers.squarespace.com/.../how-do-i-make-thumbnail-image-backgrounds-tra...

19 Jan 2016 - For each page you can add a thumbnail image which appears in an image block on the Avenue template. (Screen shots attached for ...

css3 - How to Make Bootstrap 3 Thumbnail Background Transparent ...

https://stackoverflow.com/.../how-to-make-bootstrap-3-thumbnail-background-transp...

27 Aug 2014 - I want to make the the Backgrounds of the Thumbnails transparent. I have tried ... Please make sure that you were using .png images. CSS:

image - Java: Generating thumbnails with transparency - Stack Overflow

https://stackoverflow.com/questions/.../java-generating-thumbnails-with-transparency?...

28 Jan 2010 - I'm having problems generating thumbnails of images with an Alpha .... Scaling down GIF images with a transparent color should work fine.
------------------------------------------------------------------------------------------------------------------------------------------------
CODE:
-----------------------------------------------------------------------------------------------------------------------------------------------
<html>
<!-- http://jsfiddle.net/gaby/WktFm/508/ -->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<style type="text/css">
body{background-color:green;}
.container{
position: relative;
z-index:1;
width:100px;
height:100px;
margin:30px;
border:1px solid red;
overflow:hidden;
color:red;
}
.container:before{
id:'test';
z-index:-1;
position:absolute;
width:100px;
height:100px;
left:0;
top:0;
content: url('http://lorempixel.com/100/100/sports/7/');
opacity:0.4
}
.container:hover:before{
opacity:1;
}
</style>
</head>
<body>
<div class="container">
contents
</div>
</body>
</html>

 -----------------------------------------------------------------------------------------------------------------------------------------------
THUMBNAIL WITH COVER EFFECT
https://jsfiddle.net/72r62kzy/21
-----------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<!-- https://jsfiddle.net/72r62kzy/21/ -->
<style type="text/css">
.thumb {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.thumb li {
width: 193px;
}
.thumb li ~ li {
margin-left: 20px;
}
.thumb .thumbCaption {
padding: 10px 0;
}
.overlay {
position: relative;
}
.overlay .thumbnail {
display: block;
}
.overlay .time {
position: absolute; z-index: 2;
right: 3px; bottom: 3px;
padding: 2px 5px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
}
.overlay .playWrapper {
opacity: 0;
position: absolute; z-index: 1;
top: 0;
width: 192px; height: 109px;
background: rgba(0,0,0,0.6) url("http://wptf.com/wp-content/uploads/2014/05/play-button.png") no-repeat scroll center center / 50px 50px;
}
.playWrapper .playBtn {
position: absolute; z-index: 2;
width: 50px; height: 50px;
left: 0; right: 0; top: 0; bottom: 0; margin: auto; /* center */
}
.thumb .overlay:hover .playWrapper {
opacity: 1;
}
</style>
</head>
<body>
<ul class="thumb">
<li>
<div class="overlay">
<a href="#"><img class="thumbnail" src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" width="192" height="109" alt=""></a>
<span class="time">3:28</span>
<a href="#" class="playWrapper">
<!--<span class="playBtn"><img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png" width="50" height="50" alt=""></span>-->
</a>
</div>
<div class="thumbCaption"><a href="">This is the description of the video...</a></div>
</li>
<li>
<div class="overlay">
<a href="#"><img class="thumbnail" src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" width="192" height="109" alt=""></a>
<span class="time">12:10</span>
<a href="#" class="playWrapper">
<span class="playBtn"><img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png" width="50" height="50" alt=""></span>
</a>
</div>
<div class="thumbCaption"><a href="">description goes here...</a></div>
</li>
</ul>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------------------------
WHEN HTML INSIDE FOLDER 1 AND IMAGE IN MY FOLDER
HTML PAGE URL IN GOOGLE CHROME:
file:///C:/Users/Qamar/Desktop/MY/1/HTML1.html
IMAGE PAGE URL IN GOOGLE CHROME:
file:///C:/Users/Qamar/Desktop/MY/smiley.gif
0) REMOVE BLUE PART AND CHANGE PART  1/HTML1.html
1) SUB FOLDER NAME CHANGE INTO DOUBLE DOT 1/ --->  ../
2) HTML PAGE NAME CHANGE INTO IMAGE NAME  HTML1.html  ---> smiley.gif
3) HTML PAGE INSIDE CODE: 1/ = ../  ,   HTML1.html  = smiley.gif
    ../smiley.gif
IMAGE SRC PATH WITHOUT SOFTWARE
------------------------------------------------------------------------------------------------------------
CODE:
-------------------------------------------------------------------------------------------------------------
<html>
<body>
<img src="../smiley.gif" alt="Smiley face" width="42" height="42">
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
WHEN HTML PAGE UNDER SubFolder1 AND IMAGE UNDER FOLDER SubFolder4
FOLLOW INSTRUCTIONS:
1) MAKE Main FOLDER WITH
INSIDE  TWO SubFolders
2) OPEN HTML AND IMAGE PAGES IN GOOGLE CHROME
3) TAKE PART IN IMAGE PAGE URL
SubFolder + IMAGE NAME
4) TAKE SubFolder/ PART IN HTML PAGE URL & CHANGE INTO DOUBLE
DOTS

IMAGE SRC WITHOUT SOFTWARE - YouTube


https://www.youtube.com/watch?v=LVyw8PoT9UE
19 mins ago - Uploaded by SAVE MONEY
http://fbgadgets.blogspot.co.uk/2016/08/image-src-path-without-software.html.

----------------------------------------------------------------------------------------------------

ZOOM IMAGE SAVEBY GOOGLE CHROME OR FIREFOX HD
May 31, 2017 9:57 AM
Edit
------------------------------------------------------------------------------------------------------------------
Read More:
http://help.adobe.com/en_US/scene7/using/WS274D936F-F903-4881-9524-1E63E170B09A.html
CODE GET WITH WEBSITE COPY SOFTWARE
http://www.inspyder.com/products/Web2Disk
http://www.boots.com/dior-sauvage-very-cool-spray-edt-100ml-10228509
<div data-namespace="s7classic" class="s7thumb" state="selected" style="width: 70px; height: 70px; background-image: url(&quot;https://boots.scene7.com/is/image/Boots/10228509?fit=constrain,1&amp;wid=70&amp;hei=70&amp;fmt=jpg&quot;);"><div data-namespace="s7classic" class="s7thumboverlay" type="image"></div></div>
PRODUCT URL LINK TO PRODUCT IMAGE URL LINK
http://www.boots.com/sttropez-self-tan-express-face-sheet-mask-10230418p
IMAGE URL LINK
https://boots.scene7.com/is/image/Boots/10230418?fit=constrain,1&wid=800&hei=800&fmt=jpg

WITHOUT QUOT LINK
http://www.boots.com/double-wear-nude-water-fresh-makeup-spf-30-10233742

https://boots.scene7.com/is/image/Boots/10233742

http://www.boots.com/dior-sauvage-very-cool-spray-edt-100ml-10228509
https://boots.scene7.com/is/image/Boots/10228509?fit=constrain,1&wid=70&hei=70&fmt=jpg

About Image Preset URL strings

A URL call for Image Sizing to Scene7 Image Servers has the following basic syntax:
path/name of Image Server/account name/image name?modifier1&modifier2&...
In a Scene7 Image Server URL, instructions to the server for displaying the image appear after the question mark (?). For example, this URL call delivers an image named “backpack” at a width of 250 pixels:
http://s7d1.scene7.com/is/image/S7learn/backpack?wid=250
An Image Preset URL contains all the modifier instructions for presenting the image at the proper size and formatting specifications. Without an Image Preset, notice all the modifier instructions after the question mark (?) in this URL string:
http://s7d1.scene7.com/is/image/S7learn/backpack?wid=250&fmt=jpeg&qlt=80,0&resMode=sharp&op_usm=1.1,0.5,1,0
However, in a URL string generated with an Image Preset, the name of the Image Preset appears in place of the instructions defined by the Image Preset. For example, referring to the long URL above, the URL string is:
http://s7d1.scene7.com/is/image/S7learn/backpack?$Large$
Image Preset names in URLs are enclosed in dollar signs ($). When a Scene7 Image Server encounters the Image Preset portion of the URL (the Large in this case), using the size and formatting instructions defined by the “Large” Image Preset.
---------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------
https://www.google.com/search?biw=1280&bih=694&tbm=isch&sa=1&q=how+tosave+entire+webpage&oq=how+tosave+entire+webpage&gs_l=img.3...10832.19347.0.19597.25.25.0.0.0.0.488.2220.18j5j4-1.24.0....0...1.1.64.img..1.13.1389...0j35i39k1j0i67k1j0i8i30k1j0i10i24k1.QSeVr_n0sxM#imgrc=nXpZPugMwcrsgM:

Best image downloader plus web picture finder

http://www.webimagedownloader.com/#prettyphoto/0/
-----------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
CODE:
-------------------------------------------------------------------------------------------------------------
<html>
<body>
<img src="../SubFolder4/Image.gif" alt="Smiley face" width="42" height="42">
</body>
</html>
-------------------------------------------------------------------------------------------------------------
WHEN HTML PAGE IN HtmlFolder3 AND IMAGE IN ImageFolder3
-------------------------------------------------------------------------------------------------------------

IMAGE SRC PATH WITHOUT SOFTWARE
IMAGE SRC PATH WITHOUT SOFTWARE

-------------------------------------------------------------------------------------------------------------
CODE:
-------------------------------------------------------------------------------------------------------------
<html>
<body>
<img src="../../../ImageFolder1/ImageFolder2/ImageFolder3/Image.gif" alt="Smiley face" width="42" height="42">
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
<html>
<head>
<style type='text/css'>
.IMAGE{
border-radius: 8px;
background: #F7F6F6 url(http://www.w3schools.com/css/paris.jpg) repeat-x 0 0;
width:400px;
height:300px;
}
.IMAGE:hover{
border-radius: 8px;
background: #F7F6F6 url(http://www.w3schools.com/css/trolltunga.jpg) repeat-x 0 0;
width:400px;
height:300px;
}
</style>
</head>
<body>
<div class='IMAGE'>
</div>
</body>
</html>
------------------------------------------------------------------------------------
<style>
.carousel__prev {
width:48px;
height:48px;
background:url(https://www.isagenix.com/Assets/images/icon-arrow-left_lg.svg) no-repeat;
}
.carousel__next {
width:48px;
height:48px;
background-image: url("https://www.isagenix.com/Assets/images/icon-arrow-right_lg.svg");
}
</style>
<div class="carousel__prev"></div>
<div class="carousel__next"></div>
--------------------------------------------------------------------------------------------------------------------
IMAGE SORT BY ASCENDING OR DESCENDING
ReadMore:
https://www.relliksoftware.com/exifdatechanger/home/screenshots
--------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------
EXIF Date ChangerQuickly and easily adjust the date/time taken on your photos
https://www.relliksoftware.com/exifdatechanger/home/screenshots
OTHER:
https://www.youtube.com/watch?v=FZo2jwKFL70
--------------------------------------------------------------------------------------------------------------------



--------------------------------------------------------------------------------------------------------------------

Posted by on Monday, 1 August 2016 at 09:14
Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets