USF Don mascot with logo

Latest Examples


"Captioned" - Photo Credit Caption on Rollover

This method will allow you to give credit for a photo or provide a description when the user hovers over the image:

Students sitting in a circle


Just put the image in a <div> like this:
<div title="Students sitting in a circle - photo by ___" class="captioned">
    <img title="Students sitting in a circle - photo by ___" alt="Students sitting in a circle" src="/uploadedImages/Images/Approved/560x150/throughbodies_560.jpg" />
</div>

Note: If you are using a smaller "captioned" image in the body of a page (rather than in the banner area), you can add the class "left" or "right" to the opening div tag to make the body text wrap around the image. For example: <div title="Students sitting in a circle - photo by ___" class="captioned left">


"Preview" - Class for Zoom Effect

Just add class="preview" to a large image and this will make it small, and when you roll over it you will see the full version. You can see an example of this on the Communications Site.

<div>
<img src="/uploadedImages/Images/Approved/900x320/librarycurve_900.jpg" alt="library" title="library" class="preview" />
<br />
<img title="discussion" alt="discussion" src="/uploadedImages/Images/Approved/560x150/blondediscuss_560.jpg" class="preview" />
<br />
<img title="bus stop couple" alt="bus stop couple" src="/assets/0/2147483752/2147483838/2147483860/82faa45a-25fd-40ca-b768-bbe32000c5f4.jpg" class="preview" />
<br />
<img title="blond guy staring" alt="blond guy staring " src="/uploadedImages/Images/Approved/730x320/blondguystare_730.jpg" class="preview" />
</div>

Library
discussion
bus stop couple
blond guy staring


"Thumbviewer" - Preview Class for Fixed Position Zoom 

We also recommend using the Horizontal Thumbviewer when you have more than 6-8 images. Just add class="thumbviewer horizontal" to the img tag to get this effect.

Put all of your images into a <div> using the "thumbviewer" class, and this will show them all lined up on the left. 
Roll over each of them to see the full version. Note how each image shows their "title" underneath.

<div class="thumbviewer">
<img src="/assets/0/2147483752/2147483838/2147483862/a69514f6-5764-4d44-b5c7-1132855b7109.jpg"
alt="bikerbylib_560" title="bikerbylib_560" />
<img src="/uploadedImages/Images/Approved/560x150/blondediscuss_560.jpg"
title="blondediscuss_560" alt="blondediscuss_560" />
<img src="/assets/0/2147483752/2147483838/2147483860/82faa45a-25fd-40ca-b768-bbe32000c5f4.jpg"
 title="busstopcouple_900" alt="busstopcouple_900"  />
<img src="/uploadedImages/Images/Approved/730x320/blondguystare_730.jpg"
 title="blondguystare_730" alt="blondguystare_730"  />
<img src="/assets/0/2147483752/2147483838/2147483862/e3694a93-4e6e-4881-ba7c-28d52ea23051.jpg"
 alt="bridgechurch_560" title="bridgechurch_560" />
<img src="/uploadedImages/Images/Approved/560x150/blondediscuss_560.jpg"
title="blondediscuss_560" alt="blondediscuss_560"  />
<img src="/assets/0/2147483752/2147483838/2147483860/82faa45a-25fd-40ca-b768-bbe32000c5f4.jpg"
 title="busstopcouple_900" alt="busstopcouple_900"  />
<img src="/uploadedImages/Images/Approved/730x320/blondguystare_730.jpg"
 title="blondguystare_730" alt="blondguystare_730"  />
</div>
bikerbylib_560blondediscuss_560busstopcouple_900blondguystare_730bridgechurch_560blondediscuss_560busstopcouple_900blondguystare_730


"Draggable" - Class for Very Large Images

<div class="long tall block">
<div class="draggable image">
<div class="map">
<img height="1478" width="3544" alt="Man at the Crossroads"
src="/uploadedImages/Destinations/College_of_Arts_and_Sciences/Student_Academic_Services/Summer_Reading_Project/images/rivera.universe.jpg" />
</div>
</div>
</div>

Man at the Crossroads

Click and drag, or zoom to view the mural.
You can view the full image here.





TimeLine

<div class="timeline">
    <span class="odd">
        <img src="/uploadedImages/Destinations/Offices_and_Services/Provost/Diversity/images/1.jpg"
            alt="1859" title="1859" /><h3>
                1859</h3>
        <h5>
            Richard McCabe, the first student enrolled at St. Ignatius Academy, renamed St.
            Ignatius College in 1859.<node></node></h5>
        <br />
        <br />
        <p>
            The University of San Francisco, founded in 1855, had a diverse student body from
            the beginning. Although most American institutions of higher education partly reflect
            our nation’s immigration experience, St. Ignatius College (as USF was then known)
            was the immigration experience during the nineteenth century.
        </p>
    </span><span class="even">
        <img src="/uploadedImages/Destinations/Offices_and_Services/Provost/Diversity/images/2.jpg"
            alt="1918" title="1918" /><h3>
                1918</h3>
        <h5>
            Chan Chung (“C.C”) Wing graduated in USF’s first law class, and in 1918.
            <node></node>
        </h5>
        <br />
        <br />
        <p>
            He became the first Asian American to be admitted to the bar in California history.He
            founded a successful law practice specializing in immigration law.
        </p>
    </span></div>


1859

1859

Richard McCabe, the first student enrolled at St. Ignatius Academy, renamed St. Ignatius College in 1859.


The University of San Francisco, founded in 1855, had a diverse student body from the beginning. Although most American institutions of higher education partly reflect our nation’s immigration experience, St. Ignatius College (as USF was then known) was the immigration experience during the nineteenth century.

1918

1918

Chan Chung (“C.C”) Wing graduated in USF’s first law class, and in 1918.


He became the first Asian American to be admitted to the bar in California history.He founded a successful law practice specializing in immigration law.

1929

1929

In 1929, an organization named the Filipino Ignatians was founded in the College of Arts and Sciences.


By the 1920s, Filipino students began to be part of the ethnic diversity of the institution, and in 1929, an organization named the Filipino Ignatians was founded in the College of Arts and Sciences. St. Ignatius College changed its name to the University of San Francisco in 1930.

1930

1930

In 1930, Isaiah Fletcher became the first of many African American to play on a varsity intercollegiate team for the University of San Francisco.


This was decades before most universities and colleges began to integrate their athletic teams or their campuses.

1936

1936

Earl Booker, who received a bachelor’s degree in history from USF in 1941, won the intercollegiate Boxing Championship in 1936.


In 1936, Earl Booker, another African American, won the Intercollegiate Boxing Championship, while earning his bachelor’s degree in history.

1951

1951

The USF football team of 1951 was undefeated of the gridiron and had nine of its players drafted by the National Football League.


Despite fielding, perhaps the best collegiate football team of all time, the Dons were not invited to play in any post-season bowl games unless they left their African American players (Ollie Matson and Burl Toler) at home. The team refused, stood on principle, and transcended the segregated and racist temper of the times.

1954-55

1954-55

The 1954-55 Dons exiting their flight with championship trophy in hand after winning the NCAA tournament.


Just as the undefeated 1951 USF football team was far ahead of most of the nation in fully integrating its team, the 1954–1955 USF basketball team became the first major university basketball team to win a national title with three African American players (Bill Russell, K.C. Jones, and Hal Perry) among its five starters.

1970's

1970's

During the 1970s, USF saw an increase in the number of ethnic minority students on campus.


By the fall of 1979, the USF student body was comprised of 5,644 students, of whom 357 (6.3 percent) were African American, 696 (12.3 percent) were Asian, 354 (6.3 percent) were Latino, 1,329 (23.6 percent) were international, and 2,886 (51.1 percent) were White.

Today

Today

Today USF continues to have one of the most diverse student bodies in the nation.


Among the total USF student population in the fall of 2011, 20.6 percent were Asian American, 4.8 percent were African American, 15.6 percent were Latino, 1.9 percent were Native American, 0.5 percent were Native Hawaiian/Pacific Islander, 12.0 percent were international, and 40.6 percent were white.