(Tuesday) April 5
"PROJECT #1" ...
was due before spring break
Talk about Student Pages:
https://ryansmithart.com/2022/365/students.html
(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?
javaScript vs. img:hover{opacity:0.4;}
<script type="text/javascript">
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">
//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()">
...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
https://www.w3schools.com/howto/howto_js_lightbox.asp
* Google fonts *
CSS OPACITY AND TRANSPARENCY
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;
}
HOMEWORK:
Keep working on "
PROJECT #2"
