< <Coding before changing the design>>
I tried to change the background colours when I hover the text.
Result:
This is the coding I tried to give blend mode effect before realising that I can use the blend mode in CSS
Result:
After I knew that I can use blend mode CSS as well, I applied it and the images/texts were more clear than before
.overlay {
position: absolute;
bottom: 110px;
background: rgb(255, 0, 0);
mix-blend-mode: multiply;
width: 300px;
transition: .5s ease;
opacity: 0;
padding: 300px;
text-align: center;
}
.container:hover .overlay {
opacity: 1;
}
------------------------------------------------------------------------------------------------------------------------------
<< Coding After changing the topic/ design>>
I had difficulty when I had done coding, especially in the third page which has hover effect a lot. In order to check precisely the division of the page, I used background colour and I changed it to what I really want to show after checking like the image below.
-----------------------------------------------------------------------------------------------------------------------------
I used <p> tag and <br> tag when I need to break a line. I did not know the difference between <p> and <br> but I got to know through this project. I wanted to use both tag to see the difference so I used <p> on the left side which is needed to add some space before and after each p element. And I used <br> on the right side which shows year and number since I do not need margin but I need to break the line.
-----------------------------------------------------------------------------------------------------------------------------
<Hover effect on year images>
I did not split year images and give <class> selector before I noticed the reason why I need it.
So I used the same class selector, which is "year", in the images from 2011 to 2018. However, I thought I need to give each class selectors to use the hover effect on the numbers that show the statistics.
After that, I experimented in giving the hover effect each image of the year. But it did not work as I expected.
experiment#1 : When I mouse over the image of 2011, the red box image was hidden by the first image. I thought the reason is that I used back ground image.
<img class="year11" src='img/2011.png'> <br>
.year11{
width:31.5px;
vertical-align: middle;
}
.year11:hover{
background-image: url('img/2011-r.png');
}
Result: 👎
experiment#2 : I used <div> tags instead of using <img> and used both background-mage on css. However, it did not work as well. The images disappeared or showed like the images below.
<div class="year11">
<div class="year12">
.year11{
width:31.5px;
background-image: url('img/2011.png');
vertical-align: middle;
}
.year11:hover{
background-image: url('img/2011-r.png');
}
Result: 👎
experiment#3 : The last method was to use <img> tag with <onmouseover> javascript. And it worked properly.
<img class="year11" src='img/2011.png' onmouseover="this.src='img/2011-r.png';"
onmouseout="this.src='img/2011.png';" /> <br>
<img class="year12" src='img/2012.png' onmouseover="this.src='img/2012-r.png';"
onmouseout="this.src='img/2012.png';" /> <br>
.year11{
width:31.5px;
vertical-align: middle;
}
Result: 👍
-----------------------------------------------------------------------------------------------------------------------------
<Changing the colours of the number when mouse over the year>
After I solved the first hover effect, I tried to change the colours of the number when I mouse over each year.
experiment#1 : I used the code below and I realised that I need to make each division, <div class> for "red colour", "green colour", "blue colour", and "black colour" through this experiment. I still do not know why javascript did not work so I did more research to figure out the problem.
<div class="text4">
12311539212 <div class="hover-2011">22222</div>
31414315392386902221231233333dddddddddd2222</br>
12314143153923869022212312333333</br>
</div>
.text4{
font-size:1.2em; /* 1rem=16px */
font-family: 'Source Sans Pro', sans-serif;
line-height: 30px;
letter-spacing: 1.5px;
}
.hover2011{
float:left;
}
$('.year11').hover(function () {
$(.hover2011).addClass('red');
},
function () {
$(.hover2011).removeClass('red');
});
Result: 👎
experiment#2 : So I divided the number into each colour like "hover-r", "hover-b", "hover-g", "text4-normal"(black) and used "float:left" since paragraph was split when I did not use it.
<div class="page3-right">
<div class="text4">
<div class="text4-normal">12311539212</div>
<div class="hover-r">22222</div>
<div class="text4-normal">312323231</div>
<div class="hover-b">12313</div>
<div class="text4-normal">33333332222223333</div>
<div class="hover-g">1231312213</div>
</div>
</div>
.text4{
font-size:1.2em; /* 1rem=16px */
font-family: 'Source Sans Pro', sans-serif;
line-height: 30px;
letter-spacing: 1.5px;
}
.text4-normal{
float:left;
}
.hover-r{
float:left;
}
.hover-b{
float:left;
}
.hover-g{
float:left;
}
$(".year11").mouseover(function(){
$(".hover-r").css("color","red");
});$(".year11").mouseout(function(){
$(".hover-r").css("color","black");
});
$(".year11").mouseover(function(){
$(".hover-b").css("color","blue");
});$(".year11").mouseout(function(){
$(".hover-b").css("color","black");
});
$(".year11").mouseover(function(){
$(".hover-g").css("color","green");
});$(".year11").mouseout(function(){
$(".hover-g").css("color","black");
});
Result: 👍 + 👎 : Colours were changed but I found that I need to classify <div class> more like "hover-r" to "hover-r-2011".
-----------------------------------------------------------------------------------------------------------------------------
In page5, I just used a photo(png) of the graph but I changed my mind to make it interactive using SVG after watching the session in moodle and getting feedback.
(Design: I made the pie chart in Photoshop first using masking, but it did not work when I open the file in Illustrator. I thought each element will be separated when I use division in Illustrator, but it did not work. So I made a new one.)
After making the pie chart using Illustrator, I saved it as SVG and opened it in the coding program. It was not difficult to save it and open the file since I already experienced with using SVG file for coding when I did IHR exhibit project. However, it was a good experience because I have gone through the whole process(design+coding) by myself. What I learned is that I need to make each element and define the layer name to find easily when I do coding. I filled the colour through using path id and css.
< Show the text when hovering>
I wanted to put the text in the middle of the pie chart but it was not shown when I just wrote the text. So I searched how to use and I found <text> tag (https://stackoverflow.com/questions/28128491/svg-center-text-in-circle/52719480). After applying text tag, I tried to give hover effect but did not work as well. And I found <g>, group element, to use it (https://stackoverflow.com/questions/41768657/display-text-over-svg-element-on-hover).
<g id="g1">
<text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> 3.07%(169 people) were jailed </text>
<path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.
46a423.07,423.07,0,0,0-240.68,74.71Z" transform="translate(-416.92 -92.49)" fill="none"
stroke="#000" stroke-miterlimit="10"/>
</g>
path#r-1{
fill: #FF313F;
}
svg #text-r-1 {display: none;}
svg #g1:hover #text-r-1 {display: block;}
-> At first, I used "svg g #g1:hover #text-r-1" because I sometimes use "element #id name" like "img #img1" but it did not work. (I still want to know the difference between them. When does it work properly and why does it not work on G element)
Result: 👍: it worked when I mouse over the red area.
After that, I tried to apply it to another one which runs against the first one. It means showing the text first and disappearing when I mouse over the areas.
<text id="text-0" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> test </text>
<g id="g1">
<text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> 3.07%(169 people) were jailed </text>
<path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.
46a423.07,423.07,0,0,0-240.68,74.71Z" transform="translate(-416.92 -92.49)" fill="none"
stroke="#000" stroke-miterlimit="10"/>
</g>
experiment#1
path#r-1{
fill: #FF313F;
}
svg #text-r-1 {display: none;}
svg #g1:hover #text-r-1 {display: block;}
svg #text-0 {display:block;}
svg #g1:hover #text-0 {display: none;}
experiment#2
path#r-1{
fill: #FF313F;
}
svg #text-r-1 {display: none;}
svg #g1:hover #text-r-1 {display: block;}
svg #text-0 {display:block;}
svg #g1:hover + #text-0 { display: none;}
experiment#3: give another g element
<g id="g0">
<text id="text-0" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> test </text>
</g>
<g id="g1">
<text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> 3.07%(169 people) were jailed </text>
<path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.46a423.07,423.07,0,0,0-240.68,74.71Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
</g>
path#r-1{
fill: #FF313F;
}
svg #text-r-1 {display: none;}
svg #g1:hover #text-r-1 {display: block;}
svg #g0 {display: block;}
svg #g1:hover #g0 {display:none;}
Result: 👎: two texts were shown together when I mouse over.
 |
| Mouse Out |
 |
| Mouse Over |
experiment#4: I put the text element(text-0), which be shown first when I mouse out, in group tag and changed CSS a little bit as well.
<g id="g1">
<text id="text-0" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> test </text>
<text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> 3.07%(169 people) were jailed </text>
<path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.
46a423.07,423.07,0,0,0-240.68,74.71Z" transform="translate(-416.92 -92.49)" fill="none"
stroke="#000" stroke-miterlimit="10"/>
</g>
path#r-1{
fill: #FF313F;
}
svg #text-r-1 {display: none;}
svg #g1:hover #text-r-1 {display: block;}
svg #text-0 {display: block;}
svg #g1:hover #text-0 {display:none;}
Result: 👍+👎: It worked when I mouse over the red area but it did not work when I mouse over the bright red area.
 |
| Mouse Out |
 |
| Mouse Over red area |
 |
| Mouse Over the bright red area |
I spent almost a week to figure out by myself searching it on google and Stackoverflow that other people posted. I wanted to show the stats and hide the text"5,497 offenders were arrested for Molka in 2018".
But the text kept being shown. I tried to only use CSS and use both CSS and javascript I found on google and Overstackflow but it did not work. What I have done by myself was showing the stats and hiding the text when I hover over the deep red, but the text was shown when I hover another section. I was considering to give up and use an easier one but I wanted to solve my code. So I asked it on Stackoverflow and I resolved it. (https://stackoverflow.com/questions/66152304/how-can-i-show-and-hide-sibling-element-when-i-mouse-over-in-svg)
Problem: 
They helped me and explained in an easy way but honestly, I am still confused why it did not work.
So I am going to study javascript more to understand it entirely. And I want to know why is it not working only using CSS.
< Break line >
A sentence was long to show
so I tried to use <br> , <p>, but it did not work.
<g id="g2">
<text id="text-0" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> </text>
<text id="text-r-2" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> 96.3% (5,328 people) <br> were punished
without detention. </text>
<path id="r-2" d="M988.06,295.77c203.16,0,367.86,164.7,367.86,367.86s-164.7,
367.85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,778.87,361l-31.55-47.
84c-111.39,76.66-184.42,205-184.42,350.46,0,234.81,190.35,425.16,425.16,425.16s425.16-190.
35,425.16-425.16S1222.87,238.46,988.06,238.46H988v57.31Z" transform="translate(-416.92 -92.49)
" fill="none" stroke="#000" stroke-miterlimit="10"/>
</g>
Result: 👎
<g id="g2">
<text id="text-0" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> </text>
<text id="text-r-2" x="50%" y="48.5%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> 96.3% (5,328 people) </text>
<text id="text-r-2" x="50%" y="51.5%" text-anchor="middle" stroke="#51c5cf"
stroke-width="0px" dy=".3em" font-size="50px"> were punished without detention. </text>
<path id="r-2" d="M988.06,295.77c203.16,0,367.86,164.7,367.86,367.86s-164.7,367.
85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,778.87,361l-31.55-47.
84c-111.39,76.66-184.42,205-184.42,350.46,0,234.81,190.35,425.16,425.16,425.16s425.16-190.
35,425.16-425.16S1222.87,238.46,988.06,238.46H988v57.31Z"
transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
</g>
Result: 👍
댓글
댓글 쓰기