链接问题和想知道如何创建带图像的事件点击

时间：2018-03-20 02:25:35

标签： javascript jquery html css adobe-brackets

出于某种原因，我的所有文字和图片都是链接，点击后直接返回到html页面的开头。我查看了所有代码，无法确定为什么会发生这种情况。此外，我正试图让它如此点击时我的图像导致弹出图像和替代文字。我试图这样做可能导致我的所有文本以某种方式链接到html文档。有谁知道如何解决这个问题并正确弹出图像和alt文本出现？ 

CSS Code:

html{
    background-color:darkseagreen;
}
body {
    background:#fffe;
    box-shadow: 0 0 15px;
    color: dimgray;
    font-family: Montserrat;
    font-size: 16px;
    line-height: 2;
    margin: 0 auto;
    max-width: 1000px;
    padding: 2em 3em 1em;

}

p.statement{
    font-size:15px;
    max-width: 600px;
}

img.layout{
    float:left;
    width:200px;
    height:200px;
    border-radius: 60px;
    margin-right: 3em;
    margin-bottom:1.5em;

}

@font-face {
font-family: 'Delirium';
  src: url('fonts/DELIRIUM.eot'),
       url('fonts/DELIRIUM.ttf') format('truetype'),
       url('fonts/delirium-webfont.woff2') format('woff2'),
       url('fonts/delirium-webfont.woff') format('woff');
}

@font-face {
font-family: 'Montserrat';
  src: url('fonts/Montserrat-Medium.eot'),
       url('fonts/Montserrat-Medium.ttf') format('truetype'),
       url('fonts/Montserrat-Medium.woff2') format('woff2'),
       url('fonts/Montserrat-Medium.woff') format('woff');
}

h1{
    font-family:monospace;
    font-size: 70px;
    text-align: center;
    color: #3558;
    font-weight: 600;
    line-height: 1.3;
    margin: -0.1em;
}
 h3 {
    font-family: Montserrat;
    font-size: 25px;
    text-indent: 80px;
    margin-top: -.3em;
}
h2{
    text-align:center; 
}

h4 {
    font-size: 20px;
    text-align:right;
    font-family:Montserrat;

}

hr{
    width:auto;
    border-width:3px;

}
a.center {
    color: black;

}

b, strong {
    font-weight: 600;

}
.container {
    position:relative;
    height: auto; 
    width:100%;
}

img {
    animation: colorize 1s cubic-bezier(0, 0, .8, .26);
    background: transparent;
    border: 0px solid rgba(0, 20, .20, .10);
    border-radius: 200px;
    display: block;
    margin: 0.5em auto;
    max-width: 90%;
}

img.realProfile {
    float:left;
    width:300px;
    height:300px;
    border-radius: 80px;
    margin-right: 3em;
    margin-bottom:1.5em;
}


@keyframes colorize {
    0% {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    100% {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
    }
}

footer{
    font-size:12px;
    text-align:center;
}

div.social-icon{
  display: inline-block;
float:left;
margin: 0px;
padding: 0px;
}
#socialImages {
    display: table;
  width: 30%;
  margin: 20px auto;
}
#socialImages a{
   display: table-cell;
  text-align: center;
  width: 10%;  
}
#socialImages img{
   width: 100%;
   max-width: 60px; 
}

/* Images for Class Projects Below */

#artImages{
    cursor:pointer;
    transition:0.5s;
}
#artImages:hover {
    opacity:1;
}



HTML Code:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title> FINAL WEBSITE </title>
        <link rel="stylesheet" href="Final_Website.css">

    </head>
    <body>


        <a href="final_Website.html"><img src="images/ProfileArtPic.JPG" height="400" width="400" class="headerImage"onmouseover="this.src='images/ProfileArtPicHover.jpg'"onmouseout="this.src='images/ProfileArtPic.jpg'" >


        <h1>Sinead Rafferty</h1>
        <h2>A Portfolio</h2>
        <hr>
        <h3>ABOUT ME</h3>

        <p>
            <img src="images/profile.jpg" class="realProfile">
            Type Here...
        </p>



        <h4>ARTIST STATEMENT</h4>
        <p class="statement">
            Type Here...
        </p>
        <h4>SOURCES OF INSPIRATION</h4>
            <p>

                Type Here...
            </p>
            <p>
               Type Here...
            </p>


        <h4>CLASS PROJECTS</h4>

        <p>
            <img src="images/BlueDream.jpg" id="artImages" class="layout" alt="A piece made for the Defyinging Stereotypes artshow located at UWB using adobe photoshop">
            <img src="images/Takashi.jpg" id="artImages" class="layout" alt="Digital painting inspired by Takashi Murakami's art style made using adobe photoshop">
            <img src="images/GreySketch.jpg" id="artImages" class="layout" alt="sketch of digital painting using only grey scale for a sketch of a sculpture during a tour of the Seattle Art Museaum. Created using adobe photoshop.">
            <img src="images/BodySketch.jpg" id="artImages" class="layout" alt="Digital sketch for art class esketchbook study focusing on the human form. Created using adobe photoshop.">

        </p>

        <h4>DESIGN WORK</h4>
        <p> 

             <img src="images/ITPosterCameras.jpg" class="layout" alt="Poster made for postage at the UWB IT helpdesk using adobe photoshop.">
             <img src="images/ITCard.jpg" id="artImages" class="layout" alt="Handouts made for patrons at UWB IT helpdesk inquiring about computer resources on campus. Created using adobe photoshop.">
             <img src="images/SelfDefenseLogo.jpg" id="artImages" class="layout" alt="Logo made for Slef Defense Club at UWB. Created using adobe photoshop.">
             <img src="images/SelfDefenseCarPoster.jpg" id="artImages" class="layout" alt="Event poster for Self Defense Club created using adobe photoshop.">

             <img src="images/FeministPoster.jpg" id="artImages" class="layout" alt="Event poster made in collaboration with Campus Events Board at UWB. Made using adobe photoshop.">

             <img src="images/damm.jpg" id="artImages" class="layout" alt="Logo experimentation with the DAMM, Digital Arts and Media Marketing, club logo. Made using adobe photoshop.">

            <img src="images/Sketch.jpg" id="artImages" class="layout" alt="A sketch made for a videogame concept for a BIS 232 course. For the game we wanted a strong willed female character to be the protasanist of the fantasy story. Created using adobe photoshop.">

            <img src="images/BleadImage.jpg" id="artImages" class="layout" alt="A design made for my leadership class presentation on the concept of GRIT. Created using adobe photoshop. ">


        </p>
    <div id="myDesign" class="design">
  <span class="buttonExit">&times;</span>
  <img class="design-imageContent" id="design-images">
  <div id="imageText"></div>
</div>

        <hr>   
        <div id="socialImages">

       <a href="https://twitter.com/LemonAggression"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/25480/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>

        <a href="https://www.facebook.com/Sinead.E.Rafferty"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/25480/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>

        <a href="https://www.artstation.com/shae-ingenuity"><img src="images/artstationLogo.jpg" alt="Artstation Logo" class="social-icon"></a>

        <a href="https://www.instagram.com/shae_ingenuity/?hl=en"><img src="images/instagramlogo.jpg" alt="Instagram Logo" class="social-icon"></a>
        </div>

        <footer>

        &copy; SHAE INGENUTY DESIGN
    </footer>


        <script 
   src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="Final_Website.js"></script>
            </body>

        </html>

0 个答案:

没有答案
相关问题
最新问题