ART 466


WEEK 9


(Wednesday) March 30

Weather forecast Towson
Partly Cloudy, 56°F - 36°F 


"PROJECT #1"  ... was due before spring break

Talk About Student Pages:
ryansmithart.com/2022/466/students

(Review) UPLOADING

*Always Close Dreamweaver. 
Then MAKE SURE YOU HAVE YOUR WORK IN A "WWW" FOLDER (ON YOUR DESKTOP)

*Add a link
 from your personal webpage to your "artist's website" site. 

Finally, check your work at:
https://tigerweb.towson.edu/yourUserName 





ROLLOVER IMAGES?
chakras
javaScript vs. img:hover{opacity:0.4;}



// JavaScript Tutorial



// Slide Show #1



<script type="text/javascript">
//put this in the <head> of your .html page :)

var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "1.jpg" // set image src property to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "3.jpg"
slideimages[3] = new Image()
slideimages[3].src = "4.jpg"

</script>

//Image Src:
<img src="1.jpg" width="500" height="500" id="slide"

//AND more JavaScript:

<script type="text/javascript">
// put this javaScript after your image src.
//variable that will increment through the images
var step=0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step<3)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
</script> 



 



DOWNLOAD RANDOM
BACKGROUND.ZIP FILE (1.6mb)

<body id="bod" onload="backgr()">




Center divs using CSS:

#wrap{
  text-align:left;
  max-width:1000px;
  min-width:600px;
  margin-left:auto;
  margin-right:auto;
  width:60%;
  background-color:white;
  padding:10px;
}





...What's jQuery?

lightBox: lightbox-plus-jquery.min.js

https://lokeshdhakar.com/projects/lightbox2/











Things you need (for lightBox :)

/* css: ( put this in your <head> section...) */

<link href="css/lightbox.css" rel="stylesheet"> 


// js: ( put this above your "closing" </body> tag! )
<script src="js/lightbox-plus-jquery.min.js"></script> 


<!-- html images: -->

<a href="1.jpg" data-lightbox="snoopy" data-title="chakra #1">

<img src="1.jpg"></a> 

<a href="2.jpg" data-lightbox="snoopy" data-title="throat chakra">
<img src="2.jpg"></a> 







helpful links:


Make a Div 100% Height of Browser Window


clockTab.com

****changing the background with CSS 


w3schools.com/howto/howto_js_lightbox

* Google fonts * 

CSS OPACITY AND TRANSPARENCY

* Towson OTS


** Full screen video backgrounds **

MORE LINKS : )

blindTextGenerator.com/Lorem-Ipsum

lokeshdhakar.com/projects/LightBox2/


tiffzhang.com

tiffzhang.com/startup/index.html...


w3schools.com/howto_css_Smooth_Scroll

w3schools.com/HowTo/_css_Smooth_Scroll






talk about Project #2




HOMEWORK:



Keep working on "PROJECT #2